React: データベースから受け取ったデータを、WEBページ上に表示させたい

Question

React Hooksを使用して、シンプルなブログサイトを作成しています。

コンポーネント構成は、

• App
• Home
• Page
• Header

です。
Homeには、ブログ記事がすべて表示されていて、そのタイトルをクリックすると、Pageコンポーネントに飛び、1つの記事の詳細を見ることが出来ます。

やりたいこと

現在Pageコンポーネントでは、親コンポーネントからpropsとして、ブログ記事のデータを受け取っています。これは、 console.log(props.articles) と書くと表示されていて、ここまでは順調です。

Pageコンポーネントは、親コンポーネントから渡されたIDがあります。PageコンポーネントではuseParams()を使用して、受け渡されたIDをキャッチしています。

やりたいことは、この、親コンポーネントから渡されたIDと同じIDを持った記事を、HTMLとしてページに表示させたいのです。（console.logではなく、ページ上に表示させたいです。）const targetUser = props.articles.find(() => id === props.articles.id);で、実装したいコードが実装できるかと思ったのですが、戻ってきた値はundefinedになってしまいます。

どうしたら、特定のIDの記事を、props.articlesからフィルターして、表示させることが出来るのでしょうか。

console.log(props.articles)で表示されるデータ

[
  {
    "id": "1oQAPxRl2k7Spev10qFE",
    "text": "Looooorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.",
    "title": "Title#1"
  },
  {
    "id": "ThRwQIgpLUB7iBq1H8VI",
    "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.",
    "title": "Title#2"
  },
  {
    "id": "aJvajhmoCXbfU7RJVkzn",
    "text": "Nuncccc sit amet ante convallis, semper metus ut, ornare leo. Fusce tellus metus, commodo at massa non, auctor pharetra ipsum. Maecenas in suscipit nulla. Nam in consectetur dui, non laoreet purus. Aliquam erat volutpat. Etiam non risus vestibulum, ornare mauris ut, pretium mauris. Nam ac rutrum odio. Vestibulum feugiat scelerisque elementum. Sed condimentum risus nec sem sodales porta. Proin mollis suscipit neque, facilisis luctus nisi feugiat nec. Duis efficitur orci vel ullamcorper rhoncus. Fusce ante ipsum, facilisis non purus nec, aliquam fringilla nibh. ",
    "title": "Title#3"
  },
  {
    "id": "pFFNhyrv3aJJg8Cq18Fx",
    "text": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "title": "Title#4"
  }
]

import React from 'react';
import { useParams } from 'react-router';

function Page(props) {
  const { id } = useParams();
  const targetUser = props.articles.find(() => id === props.articles.id);
  console.log(targetUser) // undefined

    return (
      <div>               

          {console.log(targetUser)}  // undefined

      </div>
    );
  }

  export default Page;

import React, { useState, useEffect } from 'react';
import Header from './Header';
import Page from '../pages/Page'
import { db } from "../Firebase";
import {
    BrowserRouter as Router,
    Route,
    Switch
} from 'react-router-dom';

const App = () => {

    const [articles, setArticles] = useState([]);

    useEffect(() => {

        const unsubscribe = db
            .collection('articles')
            .onSnapshot((snapshot) => {
                const newArticles = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
          }))
          setArticles(newArticles)
        })

          return () => unsubscribe()
    }, []);

    return (
        <div>
            <Router> 
                <Header />
                <Switch>
                    <Route exact path="/" render={() => <Home articles={articles} />} />
                    <Route exact path="/page/:id/" render={() => <Page articles={articles} />} />
                </Switch>
            </Router>     
        </div>
    );
}

export default App;

Answer 1

Page コンポーネントのこの行を、

  const targetUser = props.articles.find(() => id === props.articles.id);

こうすれば良いと思います。

  const targetUser = props.articles.find(article => id === article.id);

props.articles は記事の配列で、それ自体は id を持ってないので、id === props.articles.id という比較はできません。
記事の配列の find メソッドで各記事に対してループしてるので、各記事を引数 article で受け取って、その id をチェックしましょう。

Comments

[vankick]

ご回答いただきまして、ありがとうございます。

>props.articles は記事の配列で、それ自体は id を持ってないので、id === props.articles.id という比較はできません。

個々の部分が少し理解できませんでした。id は、 const { id } = useParams(); の部分で設定してありました。なので、 id は、ちゃんと認識されています（1oQAPxRl2k7Spev10qFE　など。console.logすると、id自体は表示することが出来ます。）

お答えいただいたソースを書いてみましたが、やはりundefinedになってしまいました。。。

[hoshi-takanori]

書き方が良くなかったようで失礼しました。id はいいんですが、問題は props.articles.id の方で、props.articles は記事の配列なので、props.articles.id は存在しなくて find がうまくいかない（undefined になる）という意味です。
const targetUser = props.articles.find(article => id === article.id); とすれば、こちらで試した限りでは targetUser に該当する記事のデータ {"id": "ID", "text": "テキスト", "title": "タイトル"} が入るはずなんですけど…。