Props

It's time to drop real values into those NAME and HEX placeholders in a swatch. Before you do that, you need to understand how data is managed in a React app. There are several kinds of data available within a component:

• Local variables. As in regular JavaScript, you store intermediate calculations in local variables in order to cache the results and provide insightful names. The data persists while the component is being rendered, but then its memory is reclaimed when the function returns.
• Global variables. As in regular JavaScript, data that must outlive a single function call and may be shared across multiple functions or multiple calls to a single function is pushed to a global scope.
• State. React introduces a notion of local data called state that persists as long as its component is alive, much like instance variables live as long as the object that owns them. An example of state might be the text entered in a form input. When state is modified, the component is automatically re-rendered to update its display.
• Props. React introduces a notion of shared but non-global data called props, which is short for properties. A parent component shares props with its child components. The props arrive via parameters to the component function. As with state, if a component's props are modified, it is automatically re-rendered to update its display.

You must decide which of these is most appropriate for storing the color's name and hexadecimal representation for a swatch. Eventually you will have multiple swatches, and each swatch will have a different color. Parameters are the most straightforward vehicle for giving each swatch its own identity, so you settle on props.

Props are values that originate in the parent component and are passed down to the children. They are defined in the JSX as HTML attributes. To make a swatch red, you add these two attributes to its tag in App:

function App() {
  return (
    <div className="App">
      <Swatch name="red" hex="#FF0000" />
    </div>
  );
}

The attributes are bundled up in an object of this form:

{
  name: 'red',
  hex: '#FF0000',
}

This object arrives in the component function as the first parameter, which by convention is named props. You unbundle the props using a destructuring assignment:

export function Swatch(props) {
  const {name, hex} = props;
  // ...
}

You have variables name and hex. Somehow you need to drop them into the JSX. This doesn't work because the text is interpreted literally:

export function Swatch(props) {
  const {name, hex} = props;
  return (
    <div className="swatch">
      <span className="name-field">name</span>
      <span className="hex-field">hex</span>
      <button className="delete-button">&#x2716;</button>
    </div>
  );
}

Instead you surround the variable names with curly braces:

export function Swatch(props) {
  const {name, hex} = props;
  return (
    <div className="swatch">
      <span className="name-field">{name}</span>
      <span className="hex-field">{hex}</span>
      <button className="delete-button">&#x2716;</button>
    </div>
  );
}

The curly braces behave much like ${} behaves in template strings. The text outside the braces is a sea of literal JSX, while the text inside is an island of a JavaScript expression. The expression is evaluated, and its results are injected in the JSX. Arbitrary JavaScript expressions may appear in the braces, not just variable names.

Try updating the prop values in the Swatch tag in the App component. Do you see the swatch update to reflect the changes?

The name and hexadecimal string look great, but the swatch doesn't have the right background color. Normally you add styles with a stylesheet, but you're not going to be able to come up with a ruleset for every possible color that the user might pick. Instead, you assign an inline style using the style attribute. Instead of assembling a string of CSS properties together, you instead make an object:

const style = {
  backgroundColor: hex,
};

Any properties that are normally hyphenated as kebab-style identifiers in CSS, like background-color, are expressed using camelCase.

The object is passed directly as the style attribute's value in the JSX:

export function Swatch(props) {
  const {name, hex} = props;
  const style = {
    backgroundColor: hex,
  };
  return (
    <div className="swatch" style={style}>
      <span className="name-field">{name}</span>
      <span className="hex-field">{hex}</span>
      <button className="delete-button">&#x2716;</button>
    </div>
  );
}

The React tooling will automatically convert the object into a string with the correct kebab-style names.

When you add this, does the swatch turn red? Try changing the hexadecimal color in App. Does it change the swatch?