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つじゃないことを忘れていたのが敗因ですね.
hatena-bookmark