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 13. 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 prop
s from the propTypes
object in Runner
‘s render function: this.props.message
, this.props.style
, etc.
Instructions
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.
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
.