-------------- APP Page ---------------------- import React, { useState } from "react"; import Form from "./Form"; var isLoggedIn = false; const NEWDATE = new Date(); const nowDate = NEWDATE.toLocaleTimeString(); function App() { //setInterval(getTime,1000); const [time, nextTime] = useState(nowDate); function getTime() { console.log("clicked"); console.log(new Date().toLocaleTimeString()); return nextTime(new Date().toLocaleTimeString()); } const [heading, setHeading] = useState("Hola mundo heading"); return ( <div className="container"> {isLoggedIn === true ? ( <h1>{heading}</h1> ) : ( <div> <h1>{heading}</h1> <Form heading={heading} setHeading={setHeading}/> </div> )} <h1 className="timer">{time}</h1> <button className="timer" onClick={getTime}> Get Time </button> </div> ); } export default App; ----------------- Form Page -------------------------- import React, { useState } from "react"; import FormInput from "./FormInputs"; function Form(params) { const [name, setName] = useState(params.heading); console.log(params.heading); console.log(name); const [conditionButton, setCondition] = useState(false); function getStateOver() { setCondition(true); } function getStateOut() { setCondition(false); } function getHeading(event) { setName(event.target.value); params.setHeading(event.target.value); } return ( <form className="form"> <FormInput type="text" placeholder="Username" onchange={getHeading} /> <FormInput type="password" placeholder="Password" /> <button type="submit" style={ conditionButton ? { background: "black" } : { background: "white" } } onMouseOver={getStateOver} onMouseOut={getStateOut} onClick={getHeading} > Login </button> </form> ); } export default Form; -------------------------- Input Page ------------------------------- import React, { useState } from "react"; function FormInput(params) { const [name, setName] = useState("Input Value"); // function onChangeEvent(event) { //console.log(element.target.value); // console.log(event.target.placeholder); // console.log(event.target.type); // setName(event.target.value); //} return ( <div> <input type={params.type} placeholder={params.placeholder} onChange={params.onchange} /> {name} </div> ); } export default FormInput;