React useEffect hook Sample-I

 

//React useEffect Sample - I

//Populating employees array after loading is complete. 

//Even though the sample demonstrates setting the array, ideally

//you will place an API call in useEffect callback to populate array

import React from 'react';

import ReactDOM from 'react-dom';

import {useState, useEffect} from "react";

function EmployeeComponent() { 

  const [employees , setEmployees] = useState([]);

  useEffect(()=>{

    alert("setting employee array");

    setEmployees(

    [

      {Id : "1" , Name: "AA1" , Location:"BB1" , Salary : "100"}, 

      {Id : "2" , Name: "AA2" , Location:"BB2" , Salary : "200"}, 

      {Id : "3" , Name: "AA3" , Location:"BB3" , Salary : "300"}, 

      {Id : "4" , Name: "AA4" , Location:"BB4" , Salary : "400"}      

    ]);

  }, []); 

  //The second argument ,[] prevents the method from being called again and again

  

  return (

    <div>

      <h1>Employee List</h1>

      <table>

        <thead>

          <tr>

            <th>Id</th>

            <th>Name</th>

            <th>Location</th>

            <th>Salary</th>

          </tr>

        </thead>

        <tbody>

          {employees.map(emp=>

            (

            <tr key={emp.Id}>

            <td>{emp.Id}</td>

            <td>{emp.Name}</td>

            <td>{emp.Location}</td>

            <td>{emp.Salary}</td>

          </tr>

          ))}

        </tbody>

      </table>

    </div>

  )

}

const element = <EmployeeComponent></EmployeeComponent>

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