import React, { useState } from "react";
import "./style.css";

const App = () => {
  const initialState = {
    userName: "",
    fullName: "",
    age: "",
  };

  const [data, setData] = useState(initialState);
  const [display, setDisplay] = useState(false);

  const printValues = (e) => {
    e.preventDefault();
    setDisplay(true);
  };

  const updateField = (e) => {
    setData({
      ...data,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <>
      <form onSubmit={printValues}>
        <div>
          <label htmlFor="userName">
            User Name:
            <input
              value={data.userName || ""}
              name="userName"
              onChange={updateField}
            />
          </label>
        </div>
        <br />
        <div>
          <label htmlFor="fullName">
            Full-name:
            <input
              name="fullName"
              value={data.fullName || ""}
              onChange={updateField}
            />
          </label>
        </div>
        <br />
        <div>
          <label htmlFor="age">
            Age:
            <input name="age" value={data.age || ""} onChange={updateField} />
          </label>
        </div>
        <br />
        <button type="submit">Submit</button>
      </form>

      {display && (
        <>
          <h4>Request sent to DB with below request data</h4>
          <ul>
            <li>UserName: {data.userName.toUpperCase()}</li>
            <li>FullName: {data.fullName.toUpperCase()}</li>
            <li>Age: {data.age}</li>
          </ul>
        </>
      )}
    </>
  );
};

export default App;