how to render list in react using api

Question

>Aim

To render the list fetched from dummy API.

The Code

App.js

import logo from './logo.svg';
import Header from './components/Header';
import MapArea from './components/MapArea';
import Card from './components/Card';
import './App.css';
import React from "react";
class App extends React.Component {
  constructor(e){
    super();
    this.state = {
      menu:false,
      userData:[]
    }
  }

  componentDidMount() {
    fetch("https://reqres.in/api/users?page=2")
    .then((a)=>{return a.json()})
    .then((b)=>{
      this.setState({
        userData:b
      })
    })
  }

Card.js

function Card(props){
let userData = props.data.userData.data;
    console.log(userData) //Sometimes WORKING FINE
    return(<div>{userData.map((item)=>{<h1 key={item.id}>item.id</h1>})}</div>)
}
export default Card;

The Problem

Now the thing is that sometimes the console.log works and sometimes it doesnt. Then I have to remove the javascript "{}" in render method of the Card.js and save and again paste it back and save. I have also added image of console when the console.log doesnt work

Also the list doesnt render.

Dani · Accepted Answer · 2022-06-24 16:33:47Z

2

Your initial state is wrong. The dummy api returns the array under the "data" field, so you need to match that structure in the initial state.

    this.state = {
      menu:false,
      userData:{ data: [] }
    }

answered Jun 24, 2022 at 16:33

Dani

9538 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2022-06-24 16:29:01Z

1

The callback for .map() isn't returning anything. Arrow functions only have an implicit return if there are no curly braces surrounding the function. So either remove the curly braces:

userData.map((item) => <h1 key={item.id}>item.id</h1>)

or add an explicit return:

userData.map((item) => { return <h1 key={item.id}>item.id</h1>; })

answered Jun 24, 2022 at 16:29

David

221k42 gold badges245 silver badges337 bronze badges

2 Comments

kalpeshshende Over a year ago

That was so stupid of me to forget that. Thank you. But what about the point where console.log doesnt work?

David Over a year ago

@kalpeshshende: What "doesn't work" about it? What gets logged to the console? If it isn't what you expect, what is the object from which you're deriving it? Basically, when it "doesn't work" what is the value of props? What do you expect it to be? Why?

Yhozen · Accepted Answer · 2022-06-24 16:41:34Z

1

@kalpeshshende your console.log is "not working" because your initial state doesn't have the same structure as the json returned from the API. I recommend changing your componentDidMount

componentDidMount() {
    fetch("https://reqres.in/api/users?page=2")
    .then((a)=>{return a.json()})
    .then((b)=>{
      this.setState({
        userData:b?.data ?? []
      })
    })

and the inside the component: let userData = props.data.userData; or const {userData} = props.data;

answered Jun 24, 2022 at 16:41

Yhozen

1,3371 gold badge9 silver badges8 bronze badges

Collectives™ on Stack Overflow

how to render list in react using api

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related