CODEWITHSUNDEEP
javascripthtmlreactjs
Nadia
Nadia

Reputation: 73

Can't display data from API

I'm new in react. I want to display data from API, but I got error. This is how I displayed it. Can anyone help me what should I call the data? check my code https://codesandbox.io/s/cool-brown-y4cdq?file=/src/App.js

return (
<div>     
  <p>Dev Hooks App </p>
  <ul>
  {data.map(item =>(
    <li> {item.result.name}</li>
    ))}
  </ul>
</div>
 );

And my data looks like this

{
"count": 82,
"next": "http://swapi.dev/api/people/?page=2",
"previous": null,
"results": [
    {
        "name": "Luke Skywalker",
        "height": "172",
        "mass": "77",
        "hair_color": "blond",
        "skin_color": "fair",
        "eye_color": "blue",
        "birth_year": "19BBY",
        "gender": "male",
        "homeworld": "",
        "films": [],
        "species": [],
        },
       ]
      }

Upvotes: 0

Views: 114

Answers (3)

Ayush Puri
Ayush Puri

Reputation: 31

Result is an array itself.so you need to either give index to get the each value or the above answers stating replace data.result.map instead of data.map and item.name instead of item.result.name.

Upvotes: 1

Marcelo Batista
Marcelo Batista

Reputation: 101

shouldn't be:

return (
<div>     
  <p>Dev Hooks App </p>
  <ul>
  {data.results.map(item =>(
    <li> {item.name}</li>
    ))}
  </ul>
</div> );

Upvotes: 0

Akash
Akash

Reputation: 834

Use data.results.map instead of data.map. Also replace item.result.name

Upvotes: 0

Related Questions