Item component
- React course
- Beginner
- Lesson 33/84
- 5 min
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.
Practice 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.
Starter code
// Define Item hereSample solution
function Item({ item }) {
return <li>{item.name} ({item.qty})</li>;
}
export default Item;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 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 Correct answer
Explanation: It receives data through the item prop.
2 Item component: fill in the missing part
function Item({ item }) { return <li>{item.name} ({____})</li>; }function Item({ item }) { return <li>{item.name} ({item.qty})</li>; }Explanation: You showed the quantity in braces.
3 Item component: match the terms
| Term | Meaning |
|---|---|
item prop |
One item data |
li |
Row tag |
name |
Product name |
qty |
Quantity |