Exercises

Alright, let's get some practice!

Avatar selection

Below, we have an application which displays multiple avatars the user can select from.

The Avatar component is already wired up, but it's being rendered manually, copy/pasted with different data. Let's update it to use the tricks we've learned in these lessons!

Acceptance criteria:

You should create an array that holds the data needed for all avatars.
That array should be iterated over, creating an <Avatar /> element for each item in the array.
There should be no key warnings in the console.

Code Playground

import Avatar from './Avatar';

function App() {

return (

<Avatar

src="https://sandpack-bundler.vercel.app/img/avatars/001.png"

alt="person with curly hair and a black T-shirt"

<Avatar

src="https://sandpack-bundler.vercel.app/img/avatars/002.png"

alt="person wearing a hijab and glasses"

<Avatar

src="https://sandpack-bundler.vercel.app/img/avatars/003.png"

alt="person with short hair wearing a blue hoodie"

<Avatar

src="https://sandpack-bundler.vercel.app/img/avatars/004.png"

alt="person with a pink mohawk and a raised eyebrow"

</div>

)

}

export default App;

Solution:

This solution uses string interpolation with template strings. Check out the JS Primer lesson on string interpolation 👀 if you're not familiar with this syntax.

Using the array index as the key (warning)

You might be wondering if it's possible to do something like this:

<div className="avatar-set">
  {data.map((
    { id, alt },
    index
  ) => (
    <Avatar
      key={index}
      src={`https://sandpack-bundler.vercel.app/img/avatars/${id}.png`}
      alt={alt}
    />
  ))}
</div>

When we call .map(), the callback function receives the item itself as the first parameter, but also the current index as the second parameter.

These numbers are indeed unique within the context of the array, but there's an issue: they don't really uniquely identify the item itself, they only identify the item's position in the array. This can lead to performance problems, as well as strange quirks.

In order to understand these issues, we'll first need to become comfortable with how state works in React, and we're not there yet. So, let's for now; I promise we'll explore this stuff in depth in the next module!

Shopping cart

Let's imagine we're building a shopping cart UI. We receive an array of items being held in the cart from the server.

Sometimes, an item in the user's shopping cart will be out of stock. If the item is out of stock, they can't purchase it. And so it should be displayed separately.

Here's a mockup for what we're trying to build:

A shopping cart page showing 3 items in the main cart table, 1 item in the “sold out” table

We've started working on it, but two problems remain:

We need to show all of the items in the user's shopping cart, not just the first one.
We need to show two separate tables. One for the in-stock items, one for the sold-out items.

Acceptance criteria:

Update the CartTable component (in the second file) to use iteration.
Make sure that there are no key warnings in the console.
In App, we should be rendering two CartTable elements:
- One for the “in stock” elements, in the current spot
- One for the “out of stock” elements, below the “Sold Out” heading.

Code Playground

import CartTable from './CartTable';

const items = [

{

id: 'hk123',

imageSrc: 'https://sandpack-bundler.vercel.app/img/shopping-cart-coffee-machine.jpg',

imageAlt: 'A pink drip coffee machine with the “Hello Kitty” logo',

title: '“Hello Kitty” Coffee Machine',

price: '89.99',

inStock: true,

{

id: 'co999',

imageSrc: 'https://sandpack-bundler.vercel.app/img/shopping-cart-can-opener.jpg',

imageAlt: 'A black can opener',

title: 'Safety Can Opener',

price: '19.95',

inStock: false,

{

id: 'cnl333',

imageSrc: 'https://sandpack-bundler.vercel.app/img/shopping-cart-night-light.png',

imageAlt: 'A kid-friendly nightlight sculpted to look like a dog astronaut',

title: 'Astro-pup Night Light',

price: '130.00',

inStock: true,

{

id: 'scb777',

imageSrc: 'https://sandpack-bundler.vercel.app/img/shopping-cart-backpack.jpg',

imageAlt: 'A pink backpack with a unicorn illustration',

title: 'Magical Unicorn Backpack',

price: '74.98',

inStock: true,

];

function App() {

return (

<h2>Shopping cart</h2>

<button>Continue checkout</button>

</div>

{/*

TODO: A second CartTable for

out-of-stock items

*/}

</>

);

}

export default App;

Solution:

Solution code (success)

// App.js
function App() {
  const inStockItems = items.filter(
    (item) => item.inStock
  );
  const outOfStockItems = items.filter(
    (item) => !item.inStock
  );

  return (
    <>
      <h2>Shopping cart</h2>
      <CartTable items={inStockItems} />

      <div className="actions">
        <button>Continue checkout</button>
      </div>

      <h2>Sold out</h2>
      <CartTable items={outOfStockItems} />
    </>
  );
}

// CartTable.js
function CartTable({ items }) {
  return (
    <table className="shopping-cart">
      <thead>
        <tr>
          <th></th>
          <th>Title</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {items.map(
          ({
            id,
            imageSrc,
            imageAlt,
            title,
            price,
          }) => (
            <tr key={id} className="cart-row">
              <td>
                <img
                  className="product-thumb"
                  src={imageSrc}
                  alt={imageAlt}
                />
              </td>
              <td>{title}</td>
              <td>${price}</td>
            </tr>
          )
        )}
      </tbody>
    </table>
  );
}