----------------- app pages ---------------------------
  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 [fname, setfname] = useState(" ");
  const [lname, setlname] = useState(" ");

  return (
    <div className="container">
      {isLoggedIn === true ? (
        <h1>Hola {fname + " " + lname}</h1>
      ) : (
        <div>
          <h1>Hola {fname + " " + lname}</h1>
          <Form fname={setfname} lname={setlname} />
        </div>
      )}
      <h1 className="timer">{time}</h1>

      <button className="timer" onClick={getTime}>
        Get Time
      </button>
    </div>
  );
}

export default App;

  import React, { useState } from "react";
import FormInput from "./FormInputs";

function Form(params) {
  const [conditionButton, setCondition] = useState(false);

  function getStateOver() {
    setCondition(true);
  }
  function getStateOut() {
    setCondition(false);
  }
  function getfname(event) {
    params.fname(event.target.value);
  }
  function getlname(event) {
    params.lname(event.target.value);
  }

  return (
    <form className="form">
      <FormInput type="text" placeholder="Username" onchange={getfname} />
      <FormInput type="text" placeholder="Lastname" onchange={getlname} />
      <FormInput type="password" placeholder="Password" />
      <button
        type="submit"
        style={
          conditionButton ? { background: "black" } : { background: "white" }
        }
        onMouseOver={getStateOver}
        onMouseOut={getStateOut}
        onClick={getfname}
      >
        Login
      </button>
    </form>
  );
}

export default Form;

  
  
----------------- form pages ---------------------------