Data is fetching properly but why is it not displaying?

Question

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;

Drew Reese · Accepted Answer · 2021-10-19 06:34:44Z

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" />

Emi OB · Accepted Answer · 2021-10-19 06:51:25Z

1

You didn't update state with actual value. you passed object into state. Here is what you have to just pass to access the values:

const refreshData = useCallback(() => {
fetch("https://www.balldontlie.io/api/v1/players")
.then((res) => res.json())
.then((data) => {
setData(data.data);
console.log(data);
      });
  }, []);

edited Oct 19, 2021 at 6:51

Emi OB

3,3953 gold badges20 silver badges40 bronze badges

answered Oct 19, 2021 at 6:43

Manish Jha

3553 silver badges18 bronze badges

Collectives™ on Stack Overflow

Data is fetching properly but why is it not displaying?

2 Answers 2

Issues

Solution

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issues

Solution

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related