Complete login form in React | handling complex multiple input form stats

 Complete login form in React | handling complex multiple input form stats

import React from "react";
import { useState } from "react/cjs/react.development";
const App = () => {
  const [info, setInfo] = useState({
    email: '',
    pass: '',
    mobile: '',
    city: ''
  })
  const inputEvent = (event) => {
    const value = event.target.value;
    const name = event.target.name;
    setInfo((preValue) => {
      return {
        ...preValue,
        [name]: value,
      }
      // if (name === "email") {
      //   return {
      //     email: value,
      //     pass: preValue.pass,
      //     mobile: preValue.mobile,
      //     city: preValue.city
      //   };
      // } else if (name === 'pass') {
      //   return {
      //     email: preValue.email,
      //     pass: value,
      //     mobile: preValue.mobile,
      //     city: preValue.city
      //   }
      // } else if (name === 'mobile'){
      //   return{
      //     email:preValue.email,
      //     pass : preValue.pass,
      //     mobile: value,
      //     city: preValue.city
      //   }
      // } else if (name === 'city'){
      //   return{
      //     email:preValue.email,
      //     pass: preValue.pass,
      //     mobile: preValue.mobile,
      //     city: value
      //   }
      // }
    });
  }
  const btnClick = () => {
  }
  return (
    <><div className="container my-5">
      <form onSubmit={btnClick}>
        <div className="mb-3">
          <label htmlFor="exampleInputEmail1" className="form-label">Email address</label>
          <input type="email" name="email" onChange={inputEvent} className="form-control" aria-describedby="emailHelp" />
          <div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
        </div>
        <div className="mb-3">
          <label htmlFor="exampleInputPassword1" className="form-label">Password</label>
          <input type="password" name="pass" onChange={inputEvent} className="form-control" />
        </div>
        <div className="mb-3">
          <label htmlFor="exampleInputPassword1" className="form-label">Mobile No.</label>
          <input type="number" name="mobile" onChange={inputEvent} className="form-control" />
        </div>
        <div className="mb-3">
          <label htmlFor="exampleInputPassword1" className="form-label">City</label>
          <input type="text" name="city" onChange={inputEvent} className="form-control" />
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    </div>
      <div className="container">
        <p>Email is: {info.email}</p>
        <p>Password is: {info.pass}</p>
        <p>Mobile no is: {info.mobile}</p>
        <p>city: {info.city}</p>
      </div>
    </>
  );
}
export default App;