ykokw.xyz blog logo

Blog Posts

No results for 'undefined'Powered by Algolia

寝ぼけてただけ(言い訳)

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `_default`. See https://fb.me/react-warning-keys for more information.
    in Fragment (created by _default)
    in _default (at PostListItem/index.js:41)
    in div (created by PostListItem__PostListItemContainer)
    in PostListItem__PostListItemContainer (at PostListItem/index.js:33)
    in PostListItem (at PostList/index.js:10)
    in div (created by Content__ContentWrapper)

こんなエラーがでてて「あー。key propsつけわすれてたわー」って思ってたら ReactのFragmentを短縮形で書いてた( <></> )から、どこでkey propsつけ忘れてたかずっと躓いてた。 _defaultのFragmentってどれだよ!みたいな。。。

// エラーが起きてたコンポーネント
// 記事タグごとにリンクを生成しつつ表示するやつ。区切り文字もセットで表示させたかったから、
// タグ配列最後以外はリンクと区切り文字をFragmentで囲っている
export default ({ tags = [] }) => !tags || tags.length > 0 ? (
  <p key={tags.join('.')} className="tags">
    [{" "}
    {tags.map((t, index) =>
      tags.length > index + 1 ? (
        <>
          <Link to={`/tag/${t}`}>{t}</Link> /{" "}
        </>
      ) : (
        <Link key={t} to={`/tag/${t}`}>{t}</Link>
      )
    )}{" "}
    ]
  </p>
) : null;

しっかりFragment使ってたし、dev toolはそれをちゃんとお知らせしてくれてたのに。 ということで修正版

export default ({ tags = [] }) =>
  !tags || tags.length > 0 ? (
    <p key={tags.join(".")} className="tags">
      [{" "}
      {tags.map((t, index) =>
        tags.length > index + 1 ? (
          <Fragment key={t}>
            <Link to={`/tag/${t}`}>{t}</Link> /{" "}
          </Fragment>
        ) : (
          <Link key={t} to={`/tag/${t}`}>
            {t}
          </Link>
        )
      )}{" "}
      ]
    </p>
  ) : null;

This content is built with Gatsby