React-Hooks: как создать динамический компонент таблицы данных многократного использования?

В моем приложении мне нужно повторно использовать компонент таблицы данных. Где я могу изменить заголовок и тело таблицы с динамическим содержимым. Данные поступают из разных API.

//Table Component
 const Table = ({ headers, data }) => {
 return (
   <table>
     <thead>
       <tr>
         {headers.map(head => (
           <th>{head}</th>
         ))}
        </tr>
      </thead>
     <tbody>
      {data.map(row => (
        <tr>
          {headers.map(head => (
            <td>{row[head]}</td>
          ))}
        </tr>
       ))}
     </tbody>
    </table>


//app.js

 export default function App() {
 const headers = ["Name", "Age", "Country"];
 const data = [
   {
    Name: "Tom",
    Age: "10",
    Country: "India"
   },
  {
   Name: "Sam",
   Age: "33",
   Country: "USA"
  }
 ];

 return (
   <div>
   <Table headers = {headers} data = {data} />
   </div>
  );
  }

Как я могу динамически использовать данные из разных API?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 397
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

здесь мы идем за данными из API https://stackblitz.com/edit/react-ie2rt6

import React, { useState, useEffect } from "react";
import "./style.css";
import Table from "./Table";
import axios from "axios";

export default function App() {
  const [headers, setHeaders] = useState([]);
  const [data, setData] = useState([]);

  useEffect(() => {
    const getPosts = async () => {
      const { data } = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      console.info(data);
      setData(data);
      setHeaders(Object.keys(data[0]));
    };

    getPosts();
  }, []);

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <Table headers = {headers} data = {data} />
    </div>
  );
}

Другие вопросы по теме