Display Dummy API JSON data to a table in React JS

Hello There In order to Display Dummy API data in table form using react js you have knowledge about HTML

tags like tboday, tr, th, td. For get the data from API we are using Fetch API using
REST API

After Fetching data using REST API we have to display json data in tabular form in our Web Browser

So In the task We are going Display Data in table form using html and css

Below are the steps mentionedn to complete the task

Step:-1 Create new react app using

npx create-react-app apidataintableform

Step:-2 HTTP Request & Response
data from the JSON placeholder site which gives us a demo API. If you want to call your own API then that is also ok. Just you need to make some changes according to your response.
The fetch() function is as shown below

const fetchData = () => {
fetch(URL)
.then((res) =>
res.json())
.then((response) => {
console.log(response);
getData(response);
})
}

Step:-3 Now Store data in UI elements

<tbody>
             <tr>
                    <th>User Id</th>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Description</th>
                </tr>
                {data.map((item, i) => (
                    <tr key={i}>
                        <td>{item.userId}</td>
                        <td>{item.id}</td>
                        <td>{item.title}</td>
                        <td>{item.body}</td>
                    </tr>
                ))}
            </tbody>

Step:-4 complete code

import logo from "./logo.svg";
import "./App.css";
import "./table.css";
import { useEffect, useState } from "react";

function App() {
  const [data, getData] = useState([]);
  const URL = "https://jsonplaceholder.typicode.com/posts";

  useEffect(() => {
    fetchData();
  }, []);`

  const fetchData = () => {
    fetch(URL)
      .then((res) => res.json())

      .then((response) => {
        console.log(response);
        getData(response);
      });
  };
  `return (
    <div>
      <h1>How Display API data in Table in React JS</h1>
      <tbody>
        <tr>
          <th>User ID</th>
          <th>ID</th>
          <th>Title</th>
          <th>Descripation</th>
        </tr>
        {data.map((item, i) => (
          <tr key={i}>
            <td>{item.userId}</td>
            <td>{item.id}</td>
            <td>{item.title}</td>
            <td>{item.body}</td>
          </tr>
        ))}
      </tbody>
    </div>
  );
}

export default App;

code repo Link
Project hosted url LINK