Props

The problem

In the previous lesson we saw how components can be composed together to build a user interface without duplicating code.

But you probably want to pass some options to those components. For instance, you might want to render the first barplot in green, the second in blue, and the third in red.

The solution

This is possible thanks to a concept called props. Check the live example below:

import Barplot from "./Barplot";

const App = () => {
  return (
    <div style={{ display: "flex", gap: 24 }}>
      <Barplot color="mediumseagreen" />
      <Barplot color="dodgerblue" />
      <Barplot color="tomato" />
    </div>
  );
};

export default App;

If you check the App component, it still calls Barplot three times. But now a color prop is passed to each one!

Now look at the Barplot component. It accepts one argument called props. This is an object where each property corresponds to one of the props passed to the component. Here, props.color holds the color value.