Lesson 21 of 3070%
(Progress persistence is disabled until Phase 9)
React
Beginner
Rendering Lists
Transforming arrays of data into arrays of components.
In React, you use the JavaScript map() function to transform an array of data into an array of JSX elements.
function ProductList() {
const products = ["Apple", "Banana", "Cherry"];
return (
<ul>
{products.map((fruit) => {
return <li>{fruit}</li>;
})}
</ul>
);
}React will automatically render the array of <li> elements!