Estoy tratando de imprimir el valor de la entrada en la pantalla, pero sigue actualizándose cada vez que ingreso un nuevo carácter.
/*Import*/ import React, { useState } from "react"; import "./Search.scss"; /*Component*/ const Search = () => { /*State*/ const [input, setInput] = useState(""); /*On Form Submit*/ return ( <> <div className="Search"> <form onSubmit={(e) => e.preventDefault()} className="Search__form"> <input value={input} onChange={(e) => setInput(e.target.value)} type="text" placeholder=" Title, companies, expertise, or benefits" style={{ fontFamily: "Arial, FontAwesome" }} ></input> <button onclick={console.log(input)}>Search</button> </form> <h1>{input}</h1> </div> </> ); }; /*Exprting*/ export default Search;Solo quiero imprimir el valor completo después de hacer clic en el botón
Está llamando a console.log(input) en cada renderizado en lugar de solo al hacer clic. Conviértalo en una función de flecha y debería hacer lo que quiere.
<button onClick={()=>console.log(input)}>Search</button>EDITAR: para responder a su pregunta de seguimiento: necesita dos variables de estado separadas:
/*Import*/ import React, { useState } from "react"; import "./Search.scss"; /*Component*/ const Search = () => { /*State*/ const [input, setInput] = useState(""); // new state variable const [submittedInput, setSubmittedInput] = useState(""); /*On Form Submit*/ return ( <> <div className="Search"> <form onSubmit={(e) => e.preventDefault()} className="Search__form"> <input value={input} onChange={(e) => setInput(e.target.value)} type="text" placeholder=" Title, companies, expertise, or benefits" style={{ fontFamily: "Arial, FontAwesome" }} ></input> <button onClick={()=>setSubmittedInput(input)}>Search</button> </form> <h1>{submittedInput}</h1> </div> </> ); };