Not able to render react component-CodePudding

I am working with a React project and getting data from a database. I am able to get the data properly and also store in the array, but while I am rendering a component using the array data, the component is not getting displayed. I am not able to understand what is going wrong. I have attached the code below.

const [postItems, setPostItems] = useState([])

useEffect(() => {
    const getPostData = async () => {
        try {

            await api.getData().then((res) => {
                console.log(res)
                res.forEach((doc) => {
                    setPostItems(prevItems => [...prevItems, {
                        "location": doc.location,
                        "date": doc.date,
                        "text": doc.experience
                    }])
                })
            })
        } catch (error) {
            console.log(error.message);
        }
    }
    getPostData()
    console.log(postItems)

}, [])

I am rendering post component and passing the array(postItems) values as props. But the post component is not getting rendered.

  {postItems.forEach((element) => {
                    <Post location={element.location} text={element.text} date={element.date} />
                })}

Also I console logged postItems array, this is what I am getting,which is correct.

[
{
    "location": "Pune",
    "date": "2021-10-30",
    "text": "Great trip"
},
{
    "location": "Pune",
    "date": "2021-10-26",
    "text": "Content"
},
{
    "location": "Pune",
    "date": "2021-10-29",
    "text": "Wonderful experience"
}

]

CodePudding user response：

You have to put a return statement before the Post component to explicitly return the component or remove the curly brackets and put parenthesis.

You should also return the forEach or alternatively using map that has an implicit return

    {postItems.map((element) => (
        <Post location={element.location}
            text={element.text} date={element.date} />
     ))}

CodePudding user response：

Let's analyze the problem,

First, you need to understand that your setState() function is async, and calling it continuously inside a forEach loop which is synchronous in nature is causing you to get wrong results.

const [postItems, setPostItems] = useState([])

useEffect(() => {
    const getPostData = async () => {
        try {

            await api.getData().then((res) => {
                const stateData = []; // make a temporary const to store your state to be set
                res.forEach((doc) => {
                    stateData.push({
                        "location": doc.location,
                        "date": doc.date,
                        "text": doc.experience
                    });
                });
                // finally set your state here
                setPostItems([...stateData]);
            })
        } catch (error) {
            console.log(error.message);
        }
    }
    getPostData();

}, [])

The second problem lies within the snippet where you are mapping every state element to

Add a return statement like below,

{postItems.forEach((element) => {
                    return <Post location={element.location} text={element.text} date={element.date} />
                })}
``