--------------------- App Page -------------------- import React, { useState } from "react"; import Form from "./Form"; function App() { const [fullName, setFullName] = useState({ fname: "f", lname: "n" }); return ( <div className="container"> <div> <h1>Hola {fullName.fname + " " + fullName.lname}</h1> <Form setFullName={setFullName} /> </div> </div> ); } export default App; --------------------- Form Page -------------------- import React, { useState } from "react"; import FormInput from "./FormInputs"; function Form(params) { function getfullname(event) { const newValue = event.target.value; const inputName = event.target.name; params.setFullName((prevName) => { if (inputName === "fname") { return { fname: newValue, lname: prevName.fname }; } else if (inputName === "lname") { return { fname: prevName.lname, lname: newValue }; } }); // --------- laternative by using desturcturing code function getfullname(event) { const { name, value } = event.target; params.setFullName((prevName) => { if (name === "fname") { return { fname: value, lname: prevName.fname }; } else if (name === "lname") { return { fname: prevName.lname, lname: value }; } }); //params.setFullname(event.target.value); } //-------------- final of destructuring code //params.setFullname(event.target.value); } return ( <form className="form"> <FormInput type="text" name="fname" placeholder="Username" onchange={getfullname} /> <FormInput type="text" name="lname" placeholder="Lastname" onchange={getfullname} /> <FormInput type="password" placeholder="Password" /> </form> ); } export default Form;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter