Multiple Component Instances

By pushing a swatch's data into parameters, you have made the Swatch component reusable. You add several several more instances of Swatch to the parent element, passing a different color to each through its props:

function App() {
  return (
    <div className="App">
      <Swatch name="red" hex="#FF0000" />
      <Swatch name="pumpkin" hex="#FF9900" />
      <Swatch name="cornflower" hex="#6495ED" />
      <Swatch name="teal" hex="#008080" />
      <Swatch name="peru" hex="#CD853F" />
    </div>
  );
}

Imagine if you had written this in plain HTML. Being able to build abstractions of complex elements is a major benefit of using a front-end framework. This same power is starting to become available even without a framework through HTML Web Components.

What if you wanted to add another swatch as the result of a user clicking a button or a fetch call finishing? You can't add the element to the JSX unless you know about it ahead of time.

The first step to supporting dynamic swatches is to push the color data into an array, which you define as an unexported global variable:

const initialColors = [
  {hex: '#FF0000', name: 'red'},
  {hex: '#FF9900', name: 'pumpkin'},
  {hex: '#6495ED', name: 'cornflower'},
  {hex: '#008080', name: 'teal'},
  {hex: '#CD853F', name: 'peru'},
];

function App() {
  // ...
}

You have this array of color data, but you want an array of swatches. The vehicle for turning one array into another array is the map function. The callback you give to map uses JSX to turn each color into a swatch:

function App() {
  const swatches = initialColors.map(color => {
    return <Swatch name={color.name} hex={color.hex} />;
  });

  return (
    <div className="App">
      {swatches}
    </div>
  );
}

This is more verbose than it needs to be. You omit the return statement and braces since they are optional:

function App() {
  const swatches = initialColors.map(color =>
    <Swatch name={color.name} hex={color.hex} />
  );

  return (
    <div className="App">
      {swatches}
    </div>
  );
}

The local swatches variable isn't really needed either. The map call can go right inside the JSX:

function App() {
  return (
    <div className="App">
      {
        initialColors.map(color =>
          <Swatch name={color.name} hex={color.hex} />
        )
      }
    </div>
  );
}

You aren't sure which form is more readable.

Try adding a new color object to the array. Does the new swatch appear in the live preview?

Open up your browser's developer console. You see a warning stating that each child needs a prop named key. Whenever a component's JSX contains a JavaScript expression that yields an array of child components, each child must be uniquely identifiable through its key prop. This key will be used by the React tooling to precisely target components that need to be re-rendered when their data changes.

This is a topic that you will explore later. For the time being, the color name serves as a unique identifier:

function App() {
  return (
    <div className="App">
      {
        initialColors.map(color =>
          <Swatch
            key={color.name}
            name={color.name}
            hex={color.hex}
          />
        )
      }
    </div>
  );
}

To avoid long lines, you experiment with a format that you have encountered in JSX code written by others. Each prop appears on its own line at the same level of indentation.