propsにfindで見つけたユーザの情報を渡したい

Question

やりたいこと

Articleコンポーネントのpropsのuserに、findUserで見つかったuserの情報を渡したいです。

export const Home = () => {
  const [users, setUsers] = useState([])
  const [articles, setArticles] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetchHome()
      setArticles(result.articles)
      setUsers(result.users)
    }
    fetchData()
  }, [])

  const findUser = (users, articleUserId) => {
    return users.find( user => user.id === articleUserId )
  }

  return (
    <ul>
    { articles.map( article => (
        <Article 
          article={ article }
          user={ findUser(users, article.user_id) }
        />
      ))
    }
    </ul>
  )
}

stateのusersには

{
"id": 1,
"name": "user_0",
"email": "[e-mail]",
"created_at": "2021-07-26T22:22:41.511Z",
"updated_at": "2021-07-26T22:22:41.511Z"
},
{
"id": 2,
"name": "user_1",
"email": "[e-mail]",
"created_at": "2021-07-26T22:22:41.539Z",
"updated_at": "2021-07-26T22:22:41.539Z"
},
{
"id": 3,
"name": "user_2",
"email": "[e-mail]",
"created_at": "2021-07-26T22:22:41.557Z",
"updated_at": "2021-07-26T22:22:41.557Z"
}

stateのarticlesには

{
"id": 1,
"title": "title0",
"user_id": 1,
"created_at": "2021-07-26T22:22:41.516Z",
"updated_at": "2021-07-26T22:22:41.516Z",
"content": "aaaaaaaaaaaaaaaaaaaaaaaaa"
},
{
"id": 2,
"title": "title1",
"user_id": 2,
"created_at": "2021-07-26T22:22:41.518Z",
"updated_at": "2021-07-26T22:22:41.518Z",
"content": "aaaaaaaaaaaaaaaaaaaaaaaaa"
},
{
"id": 3,
"title": "title2",
"user_id": 3,
"created_at": "2021-07-26T22:22:41.526Z",
"updated_at": "2021-07-26T22:22:41.526Z",
"content": "aaaaaaaaaaaaaaaaaaaaaaaaa"
},
{
"id": 4,
"title": "title3",
"user_id": 1,
"created_at": "2021-07-26T22:22:41.528Z",
"updated_at": "2021-07-26T22:22:41.528Z",
"content": "aaaaaaaaaaaaaaaaaaaaaaaaa"
},
{
"id": 5,
"title": "title4",
"user_id": 2,
"created_at": "2021-07-26T22:22:41.530Z",
"updated_at": "2021-07-26T22:22:41.530Z",
"content": "aaaaaaaaaaaaaaaaaaaaaaaaa"
},
{
"id": 6,
"title": "title5",
"user_id": 3,
"created_at": "2021-07-26T22:22:41.531Z",
"updated_at": "2021-07-26T22:22:41.531Z",
"content": "aaaaaaaaaaaaaaaaaaaaaaaaa"
},
{
"id": 7,
"title": "title6",
"user_id": 1,
"created_at": "2021-07-26T22:22:41.533Z",
"updated_at": "2021-07-26T22:22:41.533Z",
"content": "aaaaaaaaaaaaaaaaaaaaaaaaa"
},
{
"id": 8,
"title": "title7",
"user_id": 2,
"created_at": "2021-07-26T22:22:41.534Z",
"updated_at": "2021-07-26T22:22:41.534Z",
"content": "aaaaaaaaaaaaaaaaaaaaaaaaa"
},
{
"id": 9,
"title": "title0",
"user_id": 3,
"created_at": "2021-07-26T22:22:41.542Z",
"updated_at": "2021-07-26T22:22:41.542Z",
"content": "aaaaaaaaaaaaaaaaaaaaaaaaa"
}

というデータが入っています。

findUser関数ではarticles.mapで渡ってきたarticleのarticle.user_idと、user.idが同じであれば、
そのuserを返却するということしています。

しかし、現状では
TypeError: Cannot read property 'name' of undefined
というエラーがでます。
これは、userを渡している子コンポーネントであるArticleでuser.nameという風に使用しており、
現状ではuserはundefinedになっているため、該当のエラーが出現していると考えています。

どのようにすれば、Atricleコンポーネントのpropsのuserに

{
"id": 1,
"name": "user_0",
"email": "[e-mail]",
"created_at": "2021-07-26T22:22:41.511Z",
"updated_at": "2021-07-26T22:22:41.511Z"
}

を渡せるでしょうか？

よろしくお願いいたします。

Answer 1

Articleコンポーネント内でuserのundefinedチェックを入れれば良いだけじゃないでしょうか？

const Article = ({ article, user }) => {
  if (!user) return null;

  return <p>{user.name}</p>;
};