Step 4

Let's update the App component to:

1. Hold state (meetings data)
2. Pass the state down to child components (ListMeetings)

Recall, in this course, we use function components for state-less components. If your component has state, refactor it to a class component.

import { Component } from "react";

class App extends Component {
  state = {
    meetings: [
      {
        _id: "5faf5ab7043e87536e31e54e",
        course: "EN.601.226 Data Structure",
        instructor: "Ali Madooei",
        time: "MWF 12:00 - 1:15 PM",
        link: "https://wse.zoom.us/j/91907049828",
      },
      {
        _id: "5faf5ab7043e87536e31e54f",
        course: "EN.601.226 Data Structure",
        instructor: "Ali Madooei",
        time: "MWF 1:30 - 2:45 PM",
        link: "https://wse.zoom.us/j/99066784665",
      },
      {
        _id: "5faf5ab7043e87536e31e550",
        course: "EN.601.280 Full-Stack JavaScript",
        instructor: "Ali Madooei",
        time: "TuTh 12:00 - 1:15 PM",
        link: "https://wse.zoom.us/j/93926139464",
      },
      {
        _id: "5faf5ab7043e87536e31e551",
        course: "EN.601.280 Full-Stack JavaScript",
        instructor: "Ali Madooei",
        time: "TuTh 1:30 - 2:45 PM",
        link: "https://wse.zoom.us/j/91022779135",
      },
    ],
  };

  render() {
    return (
      <div style={{ color: "white" }}>
        {JSON.stringify(this.state.meetings)}
      </div>
    );
  }
}

export default App;

Notice we can store the state directly as a field (no need to use the constructor). Class fields are not yet available in JavaScript but in React you can use them and it will be transpiled to standard JavaScript for you.

Aside: With new versions of React, you can employ Hooks to use state (and other React features) without writing a class. Do not use hooks for your homework!