React useState Sample-III passing data from parent to child and vice versa

 //React useState Sample - III

//Passing data from Parent to child and vice versa

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>    

    <SalaryComponent 

    changeSalaryInfo={changeEmployeeInfo} 

    salary = {employee.Salary}></SalaryComponent>    

  </div>

}

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

////Nested Component//////////////////////////////////////////////

const SalaryComponent = ( {changeSalaryInfo , salary}) => {

  return (

    <div>

      <h1>Salary Breakup</h1>

      <p>

        <label>Employee Salary: 

          <input type="text" 

          name="Salary" 

          value={salary} 

          onChange={changeSalaryInfo}></input>

        </label>

      </p>

    </div>

  );

}

////Nestesd Component/////////////////////////////////////////////

const element = <div> 

  <p>

  <NewEmployee></NewEmployee>

  </p>

  </div>

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