Array to components

Learn to produce custom components from an array of data.

Components from arrays

Inside map you can call not only JSX tags but also your own component. Each item then becomes a rich card, row or cell.

Example: {items.map(i => <Product item={i} />)}. Product is your component; it receives the data through the item prop.

Because the component name starts with a capital letter, React treats it as a component, not a tag.

Data flow with props

When you split the list into a child component, you pass the data as a prop. The parent calls map; the child draws a single item.

This split makes the code easier to read and lets you reuse the child elsewhere. Each child has a single responsibility.

The key always goes on the outermost call: <Product key={i.id} item={i} />.

Exercise ProductList component

Complete the skeleton. Write a ProductList component. The items array has id and name on each item. With .map() turn each item into <li key={item.id}><Product item={item} /></li>. Export it.

Show example solution

function ProductList() {
  const items = [{ id: 1, name: "Pen" }, { id: 2, name: "Book" }];
  return <ul>{items.map(item => <li key={item.id}><Product item={item} /></li>)}</ul>;
}

export default ProductList;

Test yourself

Which of these is called as a component?
```
Component names always start with a capital letter.
```
- <div>
- <li>
- <product>
- <Product>
Show answer

<Product> — Capital letter means it is a component.

Array to components: fill in the missing part

{items.map(item => <Product item={____} />)}

Show answer

{items.map(item => <Product item={item} />)}

Array to components: match the terms

Component name

Capital letter
Prop name

Lowercase
children

Content
map

Loops over items

Next lesson: Filtering and sorting

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies