Child Components in the React Cycle

Let's now output our components in a loop. We'll use the map method for this:

function App() {
	const result = prods.map(prod => {
		return <Product name={prod.name} cost={prod.cost} />;
	});
	
	return <div>
		{result}
	</div>;
}

Let's not forget to specify the key attribute:

function App() {
	const result = prods.map(prod => {
		return <Product key={prod.id} name={prod.name} cost={prod.cost} />;
	});
	
	return <div>
		{result}
	</div>;
}

Modify the previous task so that users are output through a loop.