React Hook "React.useState" is called in function "form" that is neither a React function component nor a custom React Hook function

Question

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

Answer 1

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>
    </>
  );
}

Answer 2

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