React リスト
Reactでは、何らかのループを使用してリストをレンダリングします。
一般的にJavaScriptmap()のmap()配列メソッドが推奨される方法です。
map()メソッドについて復習が必要な場合は、ES6セクションを参照してください。
例：
ガレージにあるすべての車をレンダリングしてみましょう。
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
このコードをcreate-react-appで実行すると動作はしますが、リスト項目に "key "が指定されていないという警告が表示されます。
キー
キーにより、Reactは要素を追跡できます。こうすることで、ある項目が更新または削除された場合、リスト全体ではなく、その項目だけが再レンダリングされます。
キーは同じものがあってはいけません。しかしグローバルに複製することは可能です。
通常、キーは各アイテムに割り当てられた一意のIDにする必要があります。最後の手段として、配列インデックスをキーとして使用できます。
例：
前の例をリファクタリングして、キーを含めてみましょう。function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。