Reactでの子コンポーネントへの状態の受け渡し

次のような商品の配列があるとします：

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

この配列をProductsコンポーネント内に配置します。これらの商品をコンポーネントの状態に記録しましょう：

function Products() {
	const [prods, setProds] = useState(initProds);
}

それでは、商品をループで繰り返し処理し、何らかのマークアップで表示してみましょう：

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

ご覧の通り、mapループの中身はかなり複雑です。特に商品のマークアップが今後増えていくと、この複雑さはコードの読みやすさ、理解、保守性を損ないます。

商品の表示を担当するコードを別のコンポーネントに抽出した方が良いでしょう。それをProductと呼びます。コンポーネントのコードは以下の通りです：

function Product({ name, cost }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</div>;
}

それでは、Productsコンポーネント内のmapループで、子コンポーネントProductを使用するようにしましょう：

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

ご覧の通り、ループのコードは簡素化され、理解しやすくなりました。さらに、商品の表示は個別のコンポーネントが担当するようになったため、そのコンポーネント内で商品のマークアップを作成し、後から編集することができます。

技術的には、親コンポーネントがデータの状態を持ち、子コンポーネントがそれらのデータをpropsとして受け取り、必要な形式で表示するという構造になります。

Usersコンポーネントの状態に次の配列が与えられています：

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

この配列をループで繰り返し処理し、すべてのユーザーを画面に表示してください。ユーザーを表示するために、個別のコンポーネントUserを作成してください。