I am using react hooks to fetch an api and show the list of NBA players first and last name. Fetching API is successful as it can be shown in log but it's not displaying the names.
Free API I used:https://www.balldontlie.io/
//react component to fetch and show data
import { useCallback, useEffect, useState } from "react";
function App() {
const [data, setData] = useState([]);
const refreshData = useCallback(() => {
fetch("https://www.balldontlie.io/api/v1/players")
.then((res) => res.json())
.then((data) => {
setData(data);
console.log(data);
});
}, []);
useEffect(() => {
refreshData();
}, []);
return (
<div>
<h1>My player</h1>
<ul>
{Object.values(data).map((item) => (
<li key={item.id}>
{item.first_name} {item.last_name}
</li>
))}
</ul>
</div>
);
}
export default App;
CodePudding user response:
Issues
The data
is an object with two keys, data
and meta
, neither of which are objects of players with first and last name properties.
// 20211018232429
// https://www.balldontlie.io/api/v1/players
{
"data": [
{
"id": 14,
"first_name": "Ike",
...
"last_name": "Anigbogu",
...
},
...
{
"id": 497,
"first_name": "Michael",
...
"last_name": "Ansley",
...
}
],
"meta": {
....
}
}
Solution
You want to map the data
property which is the array of player objects.
function App() {
const [data, setData] = useState([]);
const refreshData = useCallback(() => {
fetch("https://www.balldontlie.io/api/v1/players")
.then((res) => res.json())
.then((data) => {
setData(data.data); // <-- save data.data array
});
}, []);
useEffect(() => {
refreshData();
}, [refreshData]);
return (
<div>
<h1>My player</h1>
<ul>
{data.map((item) => ( // <-- map data array
<li key={item.id}>
{item.first_name} {item.last_name}
</li>
))}
</ul>
</div>
);
}
function App() {
const [data, setData] = React.useState([]);
const refreshData = React.useCallback(() => {
fetch("https://www.balldontlie.io/api/v1/players")
.then((res) => res.json())
.then((data) => {
setData(data.data);
});
}, []);
React.useEffect(() => {
refreshData();
}, [refreshData]);
return (
<div>
<h1>My player</h1>
<ul>
{data.map((item) => (
<li key={item.id}>
{item.first_name} {item.last_name}
</li>
))}
</ul>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<App />,
rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>