Code Editor
Web Browser
Learn

You have learned how to pass a prop to a component:

<Greeting firstName="Esmerelda" />

You have also learned how to access and display a passed-in prop:

render: function () { return <h1>{this.props.firstName}</h1>; }

The most common use of props is to pass information to a component, from a different component. You haven't done that yet, but it's very similar to what you've seen already.

In this exercise, you will pass a prop from one component to another.

A curmudgeonly clarification about grammar:
You may have noticed some loose usage of the words prop and props. Unfortunately this is pretty inevitable.

props is the name of the object that stores passed-in information. this.props refers to that storage object. At the same time, each piece of passed-in information is also called a prop. props could refer to two pieces of passed-in information, or it could refer to the object that stores those pieces of information. :(

Report a Bug
If you see a bug or any other issue with this page, please report it here.