Bootcamp
Search…
7.2.2: Generating Components from a List

Introduction

Components can be treated like any other JSX element. In Module 7.1.2: Rendering in a Loop, we created an array of <li> elements in a loop. In the following example we create a list of BigNumber components in a loop. We can then render the list of BigNumber components by referencing it in a JSX element with {listItems}.
function BigNumber({ number }) {
return <h1>number: {number}</h1>;
}
​
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => (
<BigNumber key={number.toString()} number={number} />
));
Copy link