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!