Reactでコンポーネント間のデータのやり取りを行うとき、Propsを使って配列を渡すのはよくあるパターンです。例えば、商品のリストやメニューの項目、ユーザーの情報一覧など、データが複数集まった状態でコンポーネントに渡したい場合に、配列としてPropsを渡すと効率的です。しかし、Reactで配列を渡す際には、扱い方にコツや注意点があります。
この記事では、ReactでPropsに配列を渡す方法の基本から、実用的なサンプルコードや具体的なアドバイスを解説します。
Propsで配列を渡す方法
まず、Reactの基本的な構造で、親コンポーネントから子コンポーネントに配列を渡す方法を見てみましょう。ここでは、親コンポーネントでitemsという配列を作成し、これをPropsとして子コンポーネントに渡してみます。
親コンポーネントで配列を定義し、子コンポーネントに渡す
App.js
import React from 'react';
import Hello from './Hello';
function App() {
const items = ['Apple', 'Banana', 'Cherry'];
return (
<div className="App">
<h1>フルーツリスト</h1>
<Hello items={items} />
</div>
);
}
export default App;
ここで、items配列には「Apple」「Banana」「Cherry」という3つの文字列が含まれています。これをHelloコンポーネントに渡す際、items={items}のように記述することで、items配列をそのままPropsとして渡せます。
子コンポーネントで配列を受け取り表示する
次に、子コンポーネント側でこの配列を受け取り、リストとして表示してみましょう。
Hello.js
import React from 'react';
function Hello({ items }) {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
export default Hello;Helloコンポーネントでは、親コンポーネントから渡されたitemsをPropsとして受け取り、.map()を使ってリストを描画しています。ここで、key属性にはindexを使っていますが、実際のアプリケーションでは一意の値（IDなど）をkeyとして設定するのがベストプラクティスです。
よくあるエラーとその解決方法
undefinedやnullが含まれている or 配列が空の場合
親コンポーネントで配列が正しく定義されていなかったり、データが非同期で取得される場合に、子コンポーネントがレンダリングされるタイミングでundefinedやnullが渡されることがあります。また、配列の中身が空の状態も想定しなくてはなりません。これを防ぐには、配列が存在するかどうか または 配列の長さが0かどうか を確認してから描画するようにします。
import React from 'react';
function Hello({ items }) {
return (
<ul>
{!items || items.length === 0 ? (
<p>リストがありません</p>
) : (
items.map((item, index) => <li key={index}>{item}</li>)
)}
</ul>
);
}
export default Hello;配列がundefinedやnullではないものの、配列の中身が空のケースも考慮する必要があります。例えば、検索結果がゼロ件だった場合や、条件で絞り込んだ結果がない場合など、空の配列が渡されることがあります。この場合も適切なメッセージを表示してユーザーが混乱しないようにしましょう。
keyの重複
リストのアイテムを描画するときにkey属性が重複していると、コンソールに警告が表示されます。これは、ReactがDOM要素を効率的に更新するために各アイテムを一意に識別する必要があるためです。特に、IDを使ってユニークなkeyを指定するのが推奨されます。
気を付けないと、ディベロッパーツールのコンソールに
警告メッセージが出続けるよ！
まとめ
ReactでPropsに配列を渡す方法を、基本的な使い方から応用まで紹介しました。配列のPropsを活用することで、リストやテーブルのようなUIを動的に生成することができ、柔軟で再利用可能なコンポーネントを作成できます。Reactの実践的なアプリケーション開発には欠かせない知識なので、ぜひ覚えておきましょう。
コメント