-------------- Form Page -------------------- import React, { useState } from "react"; import FormInput from "./FormInputs"; function Form(params) { function getfullname(event) { const { name, value } = event.target; // DESTRUCTURING CONCEPT params.setFullName((prevName) => { return { ...prevName, [name]: value }; }); //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} /> </form> ); } export default Form; --------------------- App Page ----------------------- import React, { useState } from "react"; import Form from "./Form"; function App() { //setInterval(getTime,1000); const [fullName, setFullName] = useState({ fname: "f", lname: "n" }); return ( <div className="container"> {isLoggedIn === true ? ( <h1>Hola {fullName.fname + " " + fullName.lname}</h1> ) : ( <div> <h1>Hola {fullName.fname + " " + fullName.lname}</h1> <Form setFullName={setFullName} /> </div> )} <h1 className="timer">{time}</h1> <button className="timer" onClick={getTime}> Get Time </button> </div> ); } export default App;
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