[Solved] Cannot read property 'map' of undefined in React JS useState and useEffect function

Hi Joseph,

This is admin Mohamed Atef, from what I see, I am going to help you to pass this error,
First, this happens because on the first run of the page the browser returns this error because the ‘posts’ constraint, has no value on the first run of the browser because of the “asynchronous” which React js uses in the useState so all we gonna is just adding a empty array inside the ‘posts’ constraint so it can be like a placeholder until the browser get the correct value 
like 

import React, { useState, useEffect } from 'react';const Posts = ({data}) => { // we just gonna add [] inside teh useState function const [posts, setPosts] = useState([]); useEffect(() => { setPosts(data.posts); }, [setPosts, data]); return ( posts.map((post) => { return( <p key={post.title}>{post.title}<br/></p> ); }) );}export default Posts;

or We can prevent the return (if the ‘posts’ constraint has no value) by adding an if statement above the current return (contain return null in case of there is no value for the ‘posts’ constraint) to be like this 

import React, { useState, useEffect } from 'react';const Posts = ({data}) => { const [posts, setPosts] = useState(); useEffect(() => { setPosts(data.posts); }, [setPosts, data]); // Add this condition below if(!posts){ return null; } return ( posts.map((post) => { return( <p key={post.title}>{post.title}<br/></p> ); }) );}export default Posts;

Thanks hope this make you realize the idea of asynchronous & solve your error