List and List Item Patterns in React

Hands-on practice for this lecture. Write the code, see it run, understand the pattern.

Exercise 1 of 2

List Patterns Quiz

Three questions on the list component pattern: computed property key spreads, dynamic prop names, and what changes when you swap RegularList for NumberedList.

start here, then build the fix

Question 1

<RegularList
  items={products}
  sourceName="product"
  ItemComponent={ProductCard}
/>

What prop does ProductCard receive for each item in the list?

Question 2

const RegularList = ({ items, sourceName, ItemComponent }) => (
  <>
    {items.map((item, i) => (
      <ItemComponent key={i} {...{ [sourceName]: item }} />
    ))}
  </>
);

What does { [sourceName]: item } do when sourceName is "book"?

Question 3

// Switch this:
<RegularList items={orders} sourceName="order" ItemComponent={OrderRow} />

// To this:
<NumberedList items={orders} sourceName="order" ItemComponent={OrderRow} />

What changes when you swap RegularList for NumberedList?

0 / 3 answered

Exercise 2 of 2

Build the RegularList

Live editor: implement RegularList with the dynamic sourceName prop trick, then use it with two different item components to see the same component produce two different list styles.

start here, then build the fix

Task

Complete RegularList.js so it maps over items and passes each item to ItemComponentusing the dynamic prop name trick: {...[sourceName]: item}. Then use it twice in App.js — once with CompactUserRow and once with DetailedUserRow.

Loading editor…

💡 Hint: { [sourceName]: item } creates an object where the key is the value of sourceName. Spread it onto ItemComponent with {...}.

Re-read the lecture All lectures →