I am using React hook for state but when I use useState it show an error which is:
Compiled with problems:X
ERROR
src\Form.js
Line 9:29: React Hook "React.useState" is called in function "form" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
Search for the keywords to learn more about each error.
The code that I used is:
import React,{ useState } from 'react'
import './App.css';
export default function form() {
const changeValue = (event)=>{
}
const [text, setName] = useState('enter here');
return (
<>
<div className="my-3">
<textarea className="form-control" placeholder="enter text here" rows="10"></textarea>
</div>
<button className="btn btn-success">Convert to upper case</button>
<button className="btn btn-success">Convert to lower case</button>
<button className="btn btn-danger">clear</button>
<hr />
<p>string have </p>
</>
)
}
I am unable to find the error, can anyone tell how I remove the error. The package.json is:
{
"name": "text-analyzer",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
}
It should be Form with a capital F. A React component should start with a capital letter. And if you are creating a custom hook, it should start with use, like useData.
import React,{ useState } from 'react'
import './App.css';
export default function Form() {
const changeValue = (event)=>{
}
const [text, setName] = useState('enter here');
return (
<>
<div className="my-3">
<textarea className="form-control" placeholder="enter text here" rows="10"></textarea>
</div>
<button className="btn btn-success">Convert to upper case</button>
<button className="btn btn-success">Convert to lower case</button>
<button className="btn btn-danger">clear</button>
<hr />
<p>string have </p>
</>
)
}
Your form() Name that component name change by other name export default function form() {
} Example
export default function Myform() {
}
Note : The component name should Start with UpperCase Letter