⚛️🌲 React Holiday

We'll start from basics and get all the way to Suspense, Hooks, and advanced composition!
Each day is a 2-3 minute read with CodeSandbox and quick assignments.
Check out 2017 (below) for examples.

Day 4: Props are function arguments

December 04, 2017

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!


Written by chantastic.
Follow his nonsense on Twitter.