React Hook "React.useState" is called in function "form" that is neither a React-CodePudding

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"
  }

CodePudding user response：

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>
        </>

    )
}

CodePudding user response：

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