Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Learn

Take a look at the Button component class.

Notice that on line 8, Button expects to receive a prop named text. The received text will be displayed in a <button></button> element.

What if nobody passes any text to Button?

If nobody passes any text to Button, then Button's display will be blank. It would be better if Button could display a default message instead.

You can make this happen by writing a function named getDefaultProps:

var Example = React.createClass({ getDefaultProps: function () {}, render: function () { return <h1>{this.props.text}</h1>; } });

The getDefaultProps function should return an object:

var Example = React.createClass({ getDefaultProps: function () { // Return an object: return {}; }, render: function () { return <h1>{this.props.text}</h1>; } });

Inside of this returned object, write properties for any default props that you'd like to set:

var Example = React.createClass({ getDefaultProps: function () { return { text: 'yo' }; }, render: function () { return <h1>{this.props.text}</h1>; } });

If an <Example /> doesn't get passed any text, then it will display "yo."

If an <Example /> does get passed some text, then it will display that passed-in text.

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