If components are functions and functions take arguments, components should take arguments.

They do!

In React we call component arguments props.

Where do props come from?

Props are authored like HTML attributes. Say you want to add a name prop. Add it as an “attribute” where you use the component:

<Greeting name="bulbasaur" />

Now how do I use ‘em in the component?

React puts props in a single object. And that object is conveniently, the first argument of our component function.

Once you have the props object, you can interpolate values in with {}.

function Greeting(props) {
  return <h1>Hello {props.name}</h1>;
}

Tinker with it

Use the workspace below and play with props.

Be creative and have fun!