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.

PascalCase for component names – Ru Chern Chong Aug 03 '19 at 15:08 — Ru Chern Chong, Aug 03 '19 at 15:08
I always forget, Thanks! – Daniel Isaac Chavez Aug 03 '19 at 15:10 — Daniel Isaac Chavez, Aug 03 '19 at 15:10

score 6 · Answer 1 · answered Aug 03 '19 at 15:08

6

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.

answered Aug 03 '19 at 15:08

Nicholas Tower

72,740
7
86
98

score 0 · Answer 2 · answered Sep 21 '21 at 13:44

Component name should be capitalized, try Changing contact to Contact . You can find detailed conversation related to this issue here: React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function

UseState Error when utilizing React Hooks

2 Answers2

Linked

Related