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.