React 入門

TypeScript コメント掲示板アプリの開発

コメントの一覧（ダミーデータ）を表示してみる

ダミーデータをオブジェクト形式で読み込むことができたので，これを画面に表示してみます．

src/components/CommentListPage.tsx
import React from 'react'

const CommentListPage: React.FC = () => {

  const results = {
    "count":10,
    "next":"http://127.0.0.1:8000/comments/?page=2",
    "previous":null,
    "results":[
      {
        "id":9,
        "title":"9個目のコメント",
        "body":"コメントの本文9",
        "updated_at":"2023-11-21T11:20:00"
      },
      {
        "id":10,
        "title":"10個目のコメント",
        "body":"コメントの本文10",
        "updated_at":"2023-11-21T11:10:00"
      }
    ]
  };

  // console.log(results);
  // console.log(results.results);

  const commentItems = results.results.map((comment) => {
    return (
      <div key={comment.id}>
        {comment.title} : {comment.body}
      </div>
    )
  });

  return (
    <>
      <h1>コメント一覧</h1>
      {commentItems}
    </>
  )
}

export default CommentListPage

上のコードでは，28行目で commentItems という関数を定義し，コメントの配列である results.results を map で処理しています．つまり，配列 results.results から順番に一つひとつの要素を取り出し，それを comment に代入します．そして comment.title と comment.body を <div> 要素で囲います．commentItems 関数は <div> 要素で囲われたコメントを再び配列にして返します．なお，各子要素には一意に要素を特定するための key prop が必要であることから，30行目のように <div> 要素には key を設定しています．

また，36行目からの return() の中では，<h1> と {commentItems} から構成される複数の要素を <> ... </> で囲って全体を一つの要素にしていることにも注意してください．<> ... </> が必要な理由はここで確認してください．

2件のコメントについて，タイトルと本文が表示されました．

目次に戻る