How to use map() with data from axios response?

Question

I'm using axios to get data from the server and storing it in the state. When I do state.map( post => {console.log(post)} ), I do not see anything.

I'm using Express, Mongoose, NextJS and Axios.

I'm using axios to get data from the server and storing it in this.state.posts. When I do console.log(this.state.posts) in componentDidMount, it logs the posts array perfectly. But when I do the same in render(){ return ( /*here*/)} it does not show anything.

This logs all the posts without an error

async componentDidMount() {     
        const { data } = await axios.get('/api/all')
        this.setState({posts: data, isLoading: false})
        console.log(this.state.posts)
    }

But this does not log anything -

render() {
  return({ 
    posts.map( post => {
      <Post title={post.title} />
    })  
  })
}

Try to wrap your jsx code with <React.Fragment>

bkm412
– bkm412

2019-06-11 11:38:32 +00:00
Commented Jun 11, 2019 at 11:38 — bkm412
– bkm412, Commented Jun 11, 2019 at 11:38

xiaoshuaicao · Accepted Answer · 2019-06-11 11:38:45Z

5

{ 
   posts.map( post => {
    return <Post title={post.title} />
}) 
}

Maybe it works.

answered Jun 11, 2019 at 11:38

xiaoshuaicao

763 bronze badges

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

1 Comment

Ajay Yadav Over a year ago

Thanks a lot!!! This single word had been haunting me since all day. But only to fix this error, I learned a lot of things today!

Sahil Raj Thapa · Accepted Answer · 2020-11-18 03:45:40Z

2

You can provide callback to setState method which will run after the state is updated. You can use

this.setState({posts: data, isLoading: false}, () => console.log(this.state.posts))

to log updated state.

And in render method you should use

render() {
  return(
    this.state.posts.map( (post,i) => (
      <Post title={post.title} key={i} />
    ))  
  )
}

or

 render() {
  const { posts} = this.state;
   return(
      <React.Fragment>
       posts.map( (post,i) => (
        <Post title={post.title} key={i} />
       ))  
     </React.Fragment>
   )
 }

edited Nov 18, 2020 at 3:45

answered Jun 11, 2019 at 11:41

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

Comments

Adam Orłowski · Accepted Answer · 2019-06-11 11:39:21Z

1

Can you try this:

async componentDidMount() {     
        const { data } = await axios.get('/api/all')
        this.setState({posts: data, isLoading: false}, () => {
        console.log(this.state.posts)
        return;
    })    
  }

answered Jun 11, 2019 at 11:39

Adam Orłowski

4,53226 silver badges35 bronze badges

1 Comment

Ajay Yadav Over a year ago

I already tried it thinking its a problem about callbacks ! but the problem is fixed now and it was a silly mistake I wasn't returning the <Post /> in map()

Vencovsky · Accepted Answer · 2019-06-11 11:59:35Z

1

You need to return direclty posts.map with out opening {}

render() {
  const { posts = [] } = this.state
  return(
    posts.map( post => 
      <Post title={post.title} />
    )  
  )
}

const { posts = [] } will make sure that posts is an array and don't give you any errors like cannot read .map of undefined

Or you can open {} inside a React.Fragment

render() {
  const { posts = [] } = this.state
  return(
    <>
      { 
        posts.map( post => 
          <Post title={post.title} />
        )
      }
    </>    
  )
}

edited Jun 11, 2019 at 11:59

answered Jun 11, 2019 at 11:40

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

Comments

Harshit Agarwal · Accepted Answer · 2019-06-11 12:05:53Z

1

Modify your render method like this:

render() {
  let Posts = {...this.state.posts};
  return({
    Posts.map( post => <Post title={post.title} />);  
  })
}

Your code is not correctly referencing the posts in state. Also,this way any operation on posts will not affect the state object directly. Hope this helps!

edited Jun 11, 2019 at 12:05

answered Jun 11, 2019 at 11:57

Harshit Agarwal

2,4222 gold badges18 silver badges24 bronze badges

Comments

Damien · Accepted Answer · 2019-06-11 11:37:46Z

0

async componentDidMount(){

const res = await axios.get('/api/all')
  this.setState({
  post: res.data
  })
}

answered Jun 11, 2019 at 11:37

Damien

2462 gold badges7 silver badges16 bronze badges

1 Comment

Masoud Rahimi Over a year ago

For a better answer try to add some explanation to your code.

Manik · Accepted Answer · 2022-05-24 07:08:58Z

-1

export default class Blog extends Component {
state = {post:[]}
componentDidMount() {
            // Make a request for a user with a given ID
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
    this.setState({post:response.data})
  // handle success
})
.catch(function (error) {
  // handle error
  console.log(error);
})
.then(function () {
  // always executed
});
}render(){
const posts = this.state.post;
 const allposts = posts.map(post =>{
return( 
       <div>{post.title}</div>
 )
});
return(
<div>{allposts}</div>
);
}}

answered May 24, 2022 at 7:08

Manik

12 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to use map() with data from axios response?

7 Answers 7

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related