React not rendering a component

Question

Here is my Posts.jsx, One thing to be noted that the useState posts is not undefined as I console log the element in the map it is showing Javascript objects that are correct , but the Post component is not rendering and I'am unable to debug it. Please help me with this.

import axios from "axios";
import { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import Post from "../../components/post/Post";
import "./posts.css";

export default function Posts() {
    const [posts, setPosts] = useState([]);
    const { search } = useLocation();
    useEffect(() => {
        const fetchPosts = async () => {
            const res = await axios.get("/posts" + search);
            setPosts(res.data);
        };
        fetchPosts();
    }, [search]);
    return (
        <>
            <div className="posts">
                {posts?.map((p) => {
                    {
                        console.log(p);
                    }
                    <Post post={p} />;
                })}
            </div>
        </>
    );
}

This is my Post.jsx component which is not rendering

import "./post.css";
import { Link } from "react-router-dom";

export default function Post({ post }) {
    const PF = "http://localhost:5000/images/";
    return (
        <div className="post">
            {post.photo && (
                <img className="postImg" src={PF + post.photo} alt="" />
            )}
            <div className="postInfo">
                <div className="postCats">
                    {post.categories.map((c) => (
                        <span className="postCat">{c.name}</span>
                    ))}
                </div>
                <Link to={`/post/${post._id}`} className="link">
                    <span className="postTitle">{post.title}</span>
                </Link>
                <hr />
                <span className="postDate">
                    {new Date(post.createdAt).toDateString()}
                </span>
            </div>
            <p className="postDesc">{post.desc}</p>
        </div>
    );
}

I would assume the issue is the `posts?.map` posts should never be undefined just an empty array. An array will always have the method .map() — J. Cutshall, Mar 09 '22 at 14:22
A typo, perhaps? The code shown has two calls to `.map()`, one of which returns a result and the other doesn't. Are you asking what the syntactic difference is between the two? — David, Mar 09 '22 at 14:25

score 0 · Answer 1 · answered Mar 09 '22 at 14:22

0

Change this

{posts?.map((p) =>{
              {console.log(p)}
            <Post post = {p} />
          })}

to this

{posts?.map((p) => (
              {console.log(p)}
            <Post post = {p} />
          ))}

answered Mar 09 '22 at 14:22

Sean

1,368
2
9
21

2

This reads more like a game of spot-the-difference than an answer, and I can't see a difference. What did you change? **Why** does it solve the problem? – Quentin Mar 09 '22 at 14:24
Because you dont use curly braces inside map within the render function – Sean Mar 09 '22 at 14:24
2

The point is, you should explain to the OP what your code does differently instead of making them guess or just trust you. Explain (in your answer) the difference between a function using `{}` and `()`. – Brian Thompson Mar 09 '22 at 14:26
1

Glad I could help – Sean Mar 09 '22 at 15:29

React not rendering a component

1 Answers1