Props

Because our React components are functions, they can have parameters listed in their definition. In React terms, these parameters are called props.

These get passed into the component in the same way you would set an attribute on a regular element. Try the following example:

render(<App name="Michael" />, document.getElementById('root'));

The string "Michael" would then be available to us in the component as a property on the props parameter:

const App = props => <h1>{`Hello ${props.name}`}</h1>;

We use props to make our components more re-usable, and they allow us to control how our components get rendered. Instead of hard-coding the string "World" into App, by passing a prop, we can control what gets rendered.

If you change the value of the "name" prop in index.jsx, you should see it change in the browser.

Using props, we can make more generic components, which can be configured by passing in props from the parent context.

Props is short for properties, but I always imagined it like theatre props. If the component function is an actor, you can change the appearance and performance of the actor by giving them different props - either a gun or a rubber chicken, for example.

<Actor weapon="gun" />

<Actor weapon="chicken" />