GET API CALL (SIMPLE) in UseEffect HOOK in REACT JS

 IN REACT JS

import React, { useEffect, useState } from 'react';

export default function App() {

  const txtColor = {

    color: "red",

    fontSize: '20px',

    fontWeight: 'bold',

    paddingTop: '10px',

    textAlign: 'center'

  }

  // Api CAll

  const [data, setData] = useState([]);

  useEffect(() => {

    fetch('https://fakestoreapi.com/products?limit=5')

      .then(res => res.json())

      .then(jsons => {

        console.log(jsons)

        setData(jsons)

      }

      )

   

  }, []);

  console.warn("Data =" + data);

  return (

    <div>

      <h1 style={txtColor} >Hi Avi Singh Calling Api-Application Programming Interface</h1>

      <h1 style={{ ...{ color: 'green' }, ...{ fontWeight: '500' }, ...{ paddingTop: "10px" }, textAlign: 'center' }} > Get Method Call</h1>

      <div style={{width:'500px',alignItems:"center",padding:"50px"}} >

      <table border="1px">

        <tr >

          <td style={{padding:'10px',textAlign:'center'}} >Id</td>

          <td>Title</td>

          <td>Categoryl</td>

          <td>Price</td>

        </tr>

        {

          data.map((item) =>

            <tr>

              <td>{item.id}</td>

              <td>{item.title}</td>

              <td>{item.category}</td>

              <td>{item.price}</td>

            </tr>

          )

        }

      </table>

      </div>

    </div>

  );

}