React useState Sample-II using an object with useState

//React useState Sample - II

//Using an object with useState

import React from 'react';

import ReactDOM from 'react-dom';

import {useState} from "react";

////Function Component////////////////////////////////////////////

function NewEmployee() {

  const [employee, setEmployeeInfo] = useState({Id:"", Name: "" ,

   Salary: "", Location:""});

  function changeEmployeeInfo(e) {

    setEmployeeInfo({...employee,[e.target.name] :e.target.value});

  }

  return <div>

    <h1>Func Component</h1>

    <p>

      <label> Employee Id : 

        <input type="text" value={employee.Id} name="Id" 

        onChange={changeEmployeeInfo}>

        </input>

      </label>

    </p>

    <p>

      <label> Employee Name : 

        <input type="text" value={employee.Name} name="Name" 

        onChange={changeEmployeeInfo}>

        </input>

      </label>

    </p>

    <p>

      <label>

        Employee Location: 

        <input type = "text" value = {employee.location} name="Location" 

        onChange = {changeEmployeeInfo} ></input>

      </label>

    </p>

    <p>

      <label>

        Employee Salary: 

        <input type = "text" value = {employee.Salary} name="Salary" 

        onChange = {changeEmployeeInfo} ></input>

      </label>

    </p>

    <p>

      Entered Id is : <b>{employee.Id}</b>

     

    </p>

    <p>

      Entered name is: <b>{employee.Name}</b>

    </p>

    <p>

      Entered location is: <b>{employee.Location}</b>

    </p>

    <p>

      Entered salary is: <b>{employee.Salary}</b>

    </p>        

  </div>

}

////Function Component////////////////////////////////////////////

const element = <div> 

  <p>

  <NewEmployee></NewEmployee>

  </p>

  </div>

ReactDOM.render(element , document.getElementById("root"))