UseState Error when utilizing React Hooks

Question

I am using hooks but I get this error

Line 25: React Hook "React.useState" is called in function "contact" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks Line 26: React Hook "React.useState" is called in function "contact" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks Line 27: React Hook "React.useState" is called in function "contact" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

export default function contact() {

 const [messageInput, setMessageInput] = React.useState("");
 const [email, setEmail] = React.useState("");
 const [name, setName] = React.useState("");

 const enables =
   messageInput.length > 0 &&
   email.length > 0 &&
   name.length > 0;


 return (

<div className="App">

I have done a similar project before and I am using my old project as a reference. This didn't happened in my old project.

Answer 1

The rules-of-hooks lint rule uses naming conventions to infer what functions are for. Functions starting with use are assumed to be hooks. Functions starting with a capital letter are assumed to be components. contact is neither. Change it to Contact.