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

ADHDisDEV

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

earthw0rmjim

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

fetching logs from API but not rendering

Fetching data from api in react

Fetching data from api promise in react API

React doesn't display without conditional rendering from api

Fetching data from YouTube API with React Hooks

React Router Fetching data from API

Fetching data from api and passing it to state in React

Fetching API data with React

React setState doesn't re-render after fetching data

React doesn't rerender page before fetching data

React: following DRY in React when fetching data from API

Fetching data and conditional rendering with React useEffect

React doesn't get id when fetching from other page

Fetching API data via React

React doesn't render data coming from an api response

Fetching data from nested array in API React Native

React.js: Fetching Data from API with Bearer Token

fetching POST data from API (node js, react)

React useEffect infinite loop fetching data from an api

Gettin 'null' while fetching data from api with React Context

Fetching data from API in react native using redux

Fetching random data from API on button click - React

Applying Filter after Fetching data from api in React

fetching nested data from rest countries API using typescript in react

Accessing certain item after fetching data from API with react

Getting an empty array in React while fetching the data from the api

React fetching Data from Node Server using fetch() API

Data structure changes when fetching from Flask backend with react API

React component elements/data not rendering but logs in console

TOP Ranking

HotTag

Archive