Handling complex multiple input form states in ReactJs | form in reactJs

 Handling complex multiple input form states in ReactJs | form in reactJs

Access Email and Password and store inside paragraph

Using bootstrap 

Source Code:-

import React from "react";
import { useState } from "react/cjs/react.development";
const App = () => {
  const [info, setInfo] = useState({
      email: '',
      pass: ''
  })
  const inputEvent = (event) => {
    const value = event.target.value;
    const name = event.target.name;
    setInfo((preValue)=>{
      if (name === "email"){
        return{
          email: value,
          pass: preValue.pass
        };
      }else if(name === 'pass'){
        return{
          email: preValue.email,
          pass: 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" id="exampleInputEmail1" 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" id="exampleInputPassword1" />
        </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>
    </div>
    </>
  );
}
export default App;

Access three field (Email, Password and Mobile no.) and stored inside paragraph

Source Code:-

import React from "react";
import { useState } from "react/cjs/react.development";
const App = () => {
  const [info, setInfo] = useState({
    email: '',
    pass: '', 
    mobile: ''
  })
  const inputEvent = (event) => {
    const value = event.target.value;
    const name = event.target.name;
    setInfo((preValue) => {
      if (name === "email") {
        return {
          email: value,
          pass: preValue.pass,
          mobile: preValue.mobile
        };
      } else if (name === 'pass') {
        return {
          email: preValue.email,
          pass: value,
          mobile: preValue.mobile
        }
      } else if (name === 'mobile'){
        return{
          email:preValue.email,
          pass : preValue.pass,
          mobile: 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" id="exampleInputEmail1" 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" id="exampleInputPassword1" />
        </div>
        <div className="mb-3">
          <label htmlFor="exampleInputPassword1" className="form-label">Mobile No.</label>
          <input type="number" name="mobile" onChange={inputEvent} className="form-control" id="exampleInputPassword1" />
        </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>
      </div>
    </>
  );
}
export default App;

Access three field (Email, Password, Mobile no. and city) and stored inside paragraph

Source Code:-

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) => {
      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" id="exampleInputEmail1" 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" id="exampleInputPassword1" />
        </div>
        <div className="mb-3">
          <label htmlFor="exampleInputPassword1" className="form-label">Mobile No.</label>
          <input type="number" name="mobile" onChange={inputEvent} className="form-control" id="exampleInputPassword1" />
        </div>
        <div className="mb-3">
          <label htmlFor="exampleInputPassword1" className="form-label">City</label>
          <input type="text" name="city" onChange={inputEvent} className="form-control" id="exampleInputPassword1" />
        </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;