Item component

Write the ListItem component that shows a single shopping item.

Item component

The first piece is Item: it draws one shopping row. It receives the data through the item prop and returns an <li>.

Inside we show the name and quantity: <li>{item.name} ({item.qty})</li>. The braces embed the expression.

We keep Item small and pure: the same data always gives the same output. This makes reuse easy.

Prop destructuring

You can unpack the prop right in the component definition: function Item({ item }). This is shorter than writing props.item.

This form is called destructuring. The braces name the prop in the parameter list.

You will see destructuring in detail later; for now we use it to unpack props.

Exercise Item component

Complete the skeleton. Write an Item component; receive the item prop via destructuring (parameter { item }). Return <li>{item.name} ({item.qty})</li>. Export it.

Show example solution

function Item({ item }) {
  return <li>{item.name} ({item.qty})</li>;
}

export default Item;

Test yourself

How does Item receive its data?
```
A prop carries data from parent to child.
```
- Through state
- Through fetch
- Through a global variable
- Through the item prop
Show answer

Through the item prop — It receives data through the item prop.

Item component: fill in the missing part

function Item({ item }) { return <li>{item.name} ({____})</li>; }

Show answer

function Item({ item }) { return <li>{item.name} ({item.qty})</li>; }

Item component: match the terms

item prop

One item data
li

Row tag
name

Product name
qty

Quantity

Next lesson: List body

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies