Estoy usando el gancho React para el estado, pero cuando uso useState, muestra un error que es:
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.El código que usé es:
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> </> ) }No puedo encontrar el error, ¿alguien puede decirme cómo elimino el error? El paquete.json es:
{ "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" }Debe ser Form con una F mayúscula. Un componente de React debe comenzar con una letra mayúscula. Y si está creando un enlace personalizado, debe comenzar con use , como 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> </> ) }Su formulario () Nombre ese cambio de nombre del componente por otro nombre exportar función predeterminada formulario () {
} Ejemplo
exportar función predeterminada Myform() {
}
Nota: el nombre del componente debe comenzar con letras mayúsculas