Step 10
Notice that react bundles all input data to a Component into an object called props
. It is difficult to keep track of (and validate) the props that a component receives. To mitigate this shortcoming, the folks who created React also created a package called prop-types.
Stop the application and install prop-types
:
npm install prop-types
Open the ListMeetings.js
and import prop-types
:
import PropTypes from "prop-types";
If you look inside App.js
you will find we send two props to ListMeetings
component
<ListMeetings
meetings={this.state.meetings}
onDeleteMeeting={this.removeMeeting}
/>
Add the following to the end of ListMeetings.js
:
ListMeetings.propTypes = {
meetings: PropTypes.array.isRequired,
onDeleteMeeting: PropTypes.func.isRequired
};
Save the file and run the app; go to App.js
and comment out onDeleteMeeting={this.removeMeeting}
. Save the file and check out the browser console.
Notice how the PropTypes
package gives you a warning.
PropTypes is made to "type check" the props. As an added advantage, you can use it as a documentation of the props which your component receives.
PropTypes can be made to check the nested structure of your props:
ListMeetings.propTypes = {
meetings: PropTypes.arrayOf(
PropTypes.shape({
_id: PropTypes.string,
course: PropTypes.string.isRequired,
instructor: PropTypes.string.isRequired,
time: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
})
).isRequired,
onDeleteMeeting: PropTypes.func.isRequired,
};
You can learn more about PropTypes here.