POSTS.JS
import React from 'react'
import { Grid, Typography } from '@mui/material';
import Project from './Project'; // not important

const Posts = ({posts}) => {

return (
<div>
        <Typography variant="h2">Blog posts</Typography>

        <Grid container spacing={5} sx={{
        marginTop:2,
        }}>

        {
            posts.map(post =>{
                console.log("log: ", post.id); // first case scenario (pasted correctly in stackoverflow post)
                <Grid>Hello</Grid> // second case scenario (pasted correctly in stackoverflow post)
            })
        }

        </Grid>
    </div>
  )
}

export default Posts









APP.JS
import { Button, Paper, Container, Grid, Typography, Box } from '@mui/material';
import Posts from "./comp/Posts";
import React, { useEffect, useState } from 'react'
const POSTS_API_URL = 'http://localhost:8000/api/test/';

function App() {
  const [posts, setPosts] = useState([]);

      const getPosts = async () =>{
        const response = await fetch(`${POSTS_API_URL}`);
        const data = await response.json();
        setPosts(data);
    }

    useEffect(()=>{
        getPosts();
    }, []);


  return (
    <div className="App">
        <Container maxWidth="lg">
        <Paper elevation="2" square sx={{
          display: "flex",
          justifyContent: "space-between",
          padding: 1,
          marginTop: 2,
          marginBottom: 2,
        }}>
        <Box>
          <Button variant="primary" color="primary">Home</Button>
          <Button variant="primary" color="primary">About Me</Button>
        </Box>
        <Box>
          <Button variant="contained" color="primary">Contact</Button>
        </Box>
        </Paper>


{/* Posts here */}
        <Posts posts={posts}/>
{/* Posts here */}

        </Container>
    </div>
  );
}

export default App;