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
this.props

defaultProps

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 inside of 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 giving your component class a property named defaultProps:

class Example extends React.Component { render() { return <h1>{this.props.text}</h1>; } } Example.defaultProps;

The defaultProps property should be equal to an object:

class Example extends React.Component { render() { return <h1>{this.props.text}</h1>; } } // Set defaultProps equal to an object: Example.defaultProps = {};

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

class Example extends React.Component { render() { return <h1>{this.props.text}</h1>; } } Example.defaultProps = { text: 'yo' };

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.