【React】<></>にkeyを渡したい時は省略せず<React.Fragment key={index}>と書く
4841 ワード
コード
const hogeArray = [1, 2, 3, 4, 5]
export const App = () => {
return (
{hogeArray.map((hoge, index) => (
<React.Fragment key={index}>
<p>hoge</p>
</React.Fragment>
))}
)
}
export default App
説明
child in a list should have a unique "key" prop. が出る場合、
コンポーネントなどにすれば良いのだが、どうしてもフラグメントでwrapしたい時、
エラーになる
<key={index}></>
などとするとエラーになってしまう。
だから↓のように書く。
動作する
<React.Fragment key={index}></React.Fragment>
参考記事
Author And Source
この問題について(【React】<></>にkeyを渡したい時は省略せず<React.Fragment key={index}>と書く), 我々は、より多くの情報をここで見つけました https://zenn.dev/dev63/articles/817998063a9a86著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol