React 入門

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

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

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

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

const CommentListPage = () => {

  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>{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> 要素で囲われたコメントを再び配列にして返します．

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

2件のコメントが表示されました．

しかしながら，ブラウザのコンソールを確認すると警告 (Warning) が表示されているはずです．この警告は各子要素には一意に要素を特定するための key prop が必要であるという意味です．

したがって，commentItems 関数の中で要素を識別できるように固有の key をセットします．コメントには id 情報があるのでそれを固有の key とするとよいでしょう．

src/components/CommentListPage.js（抜粋）
const commentItems = results.results.map((comment) => {
  return (
    <div key={comment.id}>
      {comment.title} : {comment.body}
    </div>
  )
});

警告が表示され続けるかどうか確認するためには次の画面左側にある四角で囲ったアイコンをクリックしてコンソールをクリアしてからエディタでの保存や再読み込み等の操作をするとよいでしょう．これで警告が表示されなくなりました．

目次に戻る