I am learning to use react hooks to manage state but I get the error saying Line 5:3: React Hook "useEffect" is called in function "cockpit" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
here is my code
import React, {useEffect} from "react";
import classes from "./Cockpit.module.css";
const cockpit = (props) => {
useEffect(() => {
console.log('Cockpit js useEffect');
});
const assiginedClasses = [];
let btnClass = "";
if (props.showPersons) {
btnClass = classes.Red;
}
if (props.persons.length <= 2) {
assiginedClasses.push(classes.red);
}
if (props.persons.length <= 1) {
assiginedClasses.push(classes.bold);
}
return (
<div className={classes.Cockpit}>
<h1>Hi I'm a React App</h1>
<p className={assiginedClasses.join(" ")}>This is really Working!</p>
<button className={btnClass} onClick={props.clicked}>
Toggle Name
</button>
</div>
);
};
export default cockpit;
Below line changed after remove error solved. This code is work. 1. const cockpit = (props) => { 2. export default cockpit;
Replace below Line 1. const Cockpit = (props) => { 2. export default Cockpit;