List rendering
function
Render arrays of elements using .map(). Always provide a unique key prop for performance.
Syntax
{array.map(item => <Component key={item.id} {...item} />)}
Example
javascript
function ProductList({ products }) {
return (
<ul>
{products.map(product => (
<li key={product.id}>
<strong>{product.name}</strong>
<span>${product.price}</span>
</li>
))}
</ul>
);
}
// With empty state
return products.length > 0
? <ProductList products={products} />
: <p>No products found.</p>;