Uncaught TypeError: Cannot read properties of null (reading 'map')


Hello i need help my react page dont work cause this errros,
I just map post

Please post actual code instead of screenshots. Those are not errors. They are just warnings. What does the code not do that you expect it to do?


your want look this ?

Again, please cut and paste code, don’t just take pics.

When I read this error:

Uncaught TypeError: Cannot read properties of null (reading ‘map’)

What tells me is that somewhere in your code, you are trying to access some variable like someVariable.map and someVariable is null - that is a big no-no in JS. It doesn’t tell us what the real name of “someVariable” is. But according to the error logs, it is in Card.js on line 41.

We’d have to see that code (or preferably the code for the whole file) to help. Again, please cut and paste the code in. Below are instructions on how to format them for readability:




When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

const Card = () => {
  
  const postData = useSelector((state) => state.postReducer);
  const userData = useSelector((state) => state.userReducer);
  const [post, setPost] = React.useState(null);

   function getPosts() {
   
      return axios
        .get(`${process.env.REACT_APP_API_URL}api/post/`)
        .then((res) => {
          
          setPost(res.data);
          
          
        }),[postData,userData]
        
    }
    
    getPosts();

Can we please see the complete file? At the very least, can we see line 41?

const Card = () => {
  
  const postData = useSelector((state) => state.postReducer);
  const userData = useSelector((state) => state.userReducer);
  const [post, setPost] = React.useState(null);

   function getPosts() {
   
      return axios
        .get(`${process.env.REACT_APP_API_URL}api/post/`)
        .then((res) => {
          
          setPost(res.data);
          
          
        }),[postData,userData]
        
    }
    getPosts();

    return (
    <div>
      <h1 className="text-3xl font-bold underline">List Post</h1>
      <section>
      <>{
          !isEmpty(post[0]) &&
          post.map((post, index) =>(
           <div className="post" key={post._id}>
              
              <div className="post-contenu">
                <img src={post.picture} className="img" alt="images"></img>
              </div>
              <div className="post-action">
                <LikeButton post={post}   />
                <ModifPost post={post} userData={userData}/>
                <Corbeille post={post} userData={userData} />
              </div>
            </div>
          )
          )}
          
          </>
          
          
          
      </section>
      
    </div>

  );
};

export default Card;

OK, I assume that this is happening here.

It is saying that post is null. That is a big no-no in JS, trying to get a property off of null or undefined.

You see to be trying protect it with this:

!isEmpty(post[0]) 

First of all, I don’t know what isEmpty does because you still haven’t shared all the code. And secondly, why is it contingent on whether or not post[0] is empty? The issue from here is that post is null. Typically, we would do:

      <>{
          !!post &&
          post.map((post, index) =>(

If you specifically still need to check post[0], then I’d do:

      <>{
          !!post && !isEmpty(post[0]) &&
          post.map((post, index) =>(

I’d also put a

console.log('post:', post)

a few lines up, before the return statement to see what we’re dealing with.