React, fetching from an API logs the data, but rendering it doesn't?

user_13698713 0
Viewed 50

So I have Django as the backend and set up some basic API with django_rest_framework. It works completely fine, I can fetch the data and log it out, but when I try to... I can't explain it, I'll just paste the code... If any further info is needed, feel free to ask for it and I'll try to comment it as fast as I can. I just don't know what to do at this point, I've been struggling for hours now.

I've included all the code here: https://pastebin.com/TfasCaNE (bc it's long)

{
    posts.map(post =>{
        console.log("log: ", post.id); // this works, it gets logged out correctly, for e.g., if there are 2 posts, 2 and 1 gets logged out.
    })
}

AND

{
    posts.map(post =>{
        <Grid>Hello</Grid> // this doesn't work, it doesn't do anything, not even an error, nothing
    })
}

Why is that happening?

Edit: note that swapping "grid" to "div" doesn't help neither. That's just a MaterialUI lib component

react-hooks reactjs
1 Answers

You're enclosing your Grid component in a code block which returns nothing.

Either remove the curly braces:

posts.map(post => <Grid>Hello</Grid>)

Or add the return keyword inside the block:

posts.map(post => {return <Grid>Hello</Grid>})

If there's no additional mapping logic, the former is preferable.

user_33634810
Related