В моем приложении мне нужно повторно использовать компонент таблицы данных. Где я могу изменить заголовок и тело таблицы с динамическим содержимым. Данные поступают из разных 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?
здесь мы идем за данными из 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>
);
}