This is somewhat how your Table.jsx component should look like.

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

export default function Table() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getFakeApiData();
  }, [data]);

  const getFakeApiData = async () => {
    return await fetch("https://jsonplaceholder.typicode.com/users")
      .then((data) => data.json())
      .then((data) => setData(data));
  };

  return (
    <div>
      {data.map((user) => {
        const { name, email, address, company } = user;
        return (
          <tr key={name}>
            <td>{name}</td>
            <td>{email}</td>
            <td>{address.city}</td>
            <td>{company.name}</td>
          </tr>
        );
      })}
    </div>
  );
}

Calling the component inside the App.js

import React from "react";
import Table from "./Components/Table/Table";
import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <Table />
    </div>
  );
};

export default App;

Output of the code

Leanne Graham   [email protected]   Gwenborough Romaguera-Crona
Ervin Howell    [email protected]   Wisokyburgh Deckow-Crist
Clementine Bauch    [email protected]  McKenziehaven   Romaguera-Jacobson
Patricia Lebsack    [email protected]   South Elvis Robel-Corkery
Chelsey Dietrich    [email protected]    Roscoeview  Keebler LLC
Mrs. Dennis Schulist    [email protected] South Christy   Considine-Lockman
Kurtis Weissnat [email protected]  Howemouth   Johns Group
Nicholas Runolfsdottir V    [email protected]    Aliyaview   Abernathy Group
Glenna Reichert [email protected] Bartholomebury  Yost and Sons
Clementina DuBuque  [email protected]  Lebsackbury Hoeger LLC

IMAGE