Step 11
Let's add PropTypes to other components as well.
Open Meetings.js
and import PropType:
import PropTypes from "prop-types";
Looking at the ListMeetings
component, the Meeting
component receives two props that it uses; the key
is used for React's reconciliation algorithm.
<Meeting
meeting={meeting}
key={index}
onDeleteMeeting={this.props.onDeleteMeeting}
/>
Add the following to the end of Meetings.js
file:
Meeting.propTypes = {
meeting: 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,
};
Open Search.js
and import PropType. Add the following to the end of this file:
Search.propTypes = {
query: PropTypes.string,
updateQuery: PropTypes.func.isRequired,
};
Open CreateMeeting.js
and import PropType. Add the following to the end of this file:
CreateMeeting.propTypes = {
onCreateMeeting: PropTypes.func.isRequired,
};
Save the file and revisit the app in your browser; everything must look and function as before!