Click here to Skip to main content
15,921,959 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am working on a simple React app which is a blog app.

I have a component which is used to display the name of the Author.

```
import React from "react";
import { useSelector } from "react-redux";

const AuthorPost = ({ authorId }) => {
  console.log(authorId); // Prints authorId as expected
  const authors = useSelector((store) => store.author);
  console.log(authors); // Prints array
  const author = authors.find((author) => author.id === authorId);
  console.log(author); // Prints undefined

  return <span>{author ? author.name : "unknown author"}</span>;
};

export default AuthorPost;


```

The following line is used to find the author whose id matches the authorId. authorId is a prop that we get from a different component.

I have console logged both authorId and author.id separately. And it works.
But if I try to find an author which has an author.id which matches authorId then I get undefined. I am pulling my hair for hours on this particular problem. Need help.

What I have tried:

I have tried console logging both author.id and authorId. Technically it should work.
Posted
Comments
Chris Copeland 3-Dec-22 15:20pm    
What are the types of authorId and author.id? The === comparator checks for types as well, so if author.id is a string and authorId is a number, the find() would fail. You can check using typeof(authorId) and typeof(author.id). If they're not the same then that explains the problem.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900