Building a Dynamic Table in React JS using Data from an API

In this tutorial, we will learn how to create a dynamic table in React JS and populate it with data fetched from an API.

We will be using the fetch API to make a GET request to fetch data from a sample API.

Here are the steps to create a dynamic table with data fetched from an API in React JS:

Step 1: Create a new React project
First, create a new React project by running the following command in your terminal:

npx create-react-app dynamic-table

This command will create a new React project called dynamic-table.

Step 2: Create a Table component
Next, create a new file called Table.js in the src/components folder. This file will contain our Table component.

In Table.js, add the following code:

import React from 'react';

const Table = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.email}</td>
            <td>{item.phone}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

Step 3: Fetch data from the API
In the src folder, create a new file called App.js.

In App.js, add the following code:

import React, { useState, useEffect } from 'react';
import Table from './components/Table';

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  return <Table data={data} />;
};

export default App;

In this code, we are using the useState and useEffect hooks to fetch data from the API and store it in the data state variable.

Step 4: Run the React app
To run the React app, navigate to the project folder in your terminal and run the following command:

npm start

This will start the development server and open the app in your default browser. You should see a dynamic table populated with data fetched from the API.

That’s it! You have successfully created a dynamic table in React JS and populated it with data fetched from an API. Feel free to customize the table component and fetch data from a different API if needed.

I hope this tutorial was helpful! Let me know if you have any questions.