How to use map() with data from axios response?
{ posts.map( post => { return <Post title={post.title} />}) }
Maybe it works.
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> ) }
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; }) }