Learn
PropTypes
Add Properties to PropTypes

In the code editor, look at the property on MessageDisplayer‘s propTypes object:

message: PropTypes.string

What are the properties on propTypes supposed to be, exactly?

The name of each property in propTypes should be the name of an expected prop. In our case, MessageDisplayer expects a prop named message, so our property’s name is message.

The value of each property in propTypes should fit this pattern:

PropTypes.expected_data_type_goes_here

Since message is presumably going to be a string, we chose PropTypes.string. You can see this on line 12. Notice the difference in capitalization between the propTypes object and PropTypes!

Each property on the propTypes object is called a propType.

Select the next file in the code editor, Runner.js. Find Runner‘s propTypes object.

Runner has six propTypes! Look at each one. Note that bool and func are abbreviated, but all other data types are spelled normally.

If you add .isRequired to a propType, then you will get a console warning if that prop isn’t sent.

Try to find all six props from the propTypes object in Runner‘s render function: this.props.message, this.props.style, etc.

Instructions

1.

Select BestSeller.js.

In BestSeller‘s propTypes object, write one propType for each prop that BestSeller is expecting: title, author, and weeksOnList.

Make title and author strings. Make weeksOnList a number. Make all three isRequired.

If you get stuck, look to Runner.js for guidance.

2.

Good! You just gave BestSeller three propTypes.

In the code editor, open the last file, BookList.js.

At the bottom of the file, render <BookList /> using ReactDOM.render.

Folder Icon

Take this course for free

Already have an account?