React Hooks - Map function returning undefined

Your map needs to take the data state you have set and then map the array from there. You then need to alias your map. You can see examples here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Your map function wants to look more like:

{data.map(a => (
      <tr key={a.name}>
          <td>{a.name}</td>
          <td>{a.email}</td>
          <td>{a.address.city}</td>
          <td>{a.company.name}</td>
      </tr>
))}

You need to make sure you are using your reference (in this case 'a').

You can then place this safely inside a table. for example:

export const Table = () => {

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

 useEffect(() => {

 setData([...data, getFakeApiData()]);

 }, [data]);

 return (
     <div>
       <table>
            <thead>
               <tr>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Company Name</th>
                 <th>Address</th>
               </tr>
            </thead>
            <tbody>
               {data.map(a => (
                  <tr key={a.name}>
                      <td>{a.name}</td>
                      <td>{a.email}</td>
                      <td>{a.address.city}</td>
                      <td>{a.company.name}</td>
                  </tr>
                ))}
            </tbody>
       </table>

     </div>

 )

}

This is an example only. But you can see this way should help.

Remove Table on map statement like return data.map((user) => {

const renderTable = () => {

  return 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>
    )
  })
 }

Table is a function and doesn't have key value pairs. So using the dot notion will return undefined. You are setting your api call inside of data, this is what you want to map through. You can access it by saying: data.map instead of Table.data.map

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