• 作成日時:
  • 更新日時:

Semantic UI ReactのMessageでlistプロパティを使ってキーが重複してしまう時はchildrenを使えば良い

FormのバリデーションエラーをSemantic UI ReactのMessageで表示したいと思って実装していました.

Messageにはlistという属性があり,ここにコンテンツを渡せば複数のメッセージがリストで表示されます.

<Message
  error
  list={Object.values(this.state.errors)}
/>

Messageはlistのメッセージ内容をそのままkeyにするので,同じ内容のメッセージがあると,ReactにWarning: Encountered two children with the same key,と警告されます.

同じ内容のメッセージでも2つ該当する時があるのでこの場合は重複して表示させたいです.幸いそれぞれのメッセージには対象とする入力があるのでキーは個別に設定できます.

標準の使い方をしているだけなのにエラーが出るのはなんか納得がいかないので,ソースコード見て解決策を探そうと思いましたが,よく考え直してみたらlistショートカットを使わずにchildrenで渡せば問題ないことに気が付きました.

<Message error>
  <Message.List>
    {Object.entries(this.state.errors).map(([key, value]) => (
      <Message.Item key={key} content={value} />
    ))}
  </Message.List>
</Message>

気がつくのにそこまで時間がかからなかったとは言え,短く書くことばかりを考えてやり方が1つじゃないことを忘れていたのが敗因ですね.