Step 5

HTML form elements naturally keep some internal state and update it based on user input. In React, mutable state is kept in the state property of components, and only updated with setState(). We should combine the two by making the React state be the "single source of truth".

An input form element whose value is controlled by React is called a controlled component.

This means the React component that renders a form also controls what happens in that form on subsequent user input.

So, let's update the CreateMeeting component to be a class component with state:

import { Component } from "react";
import "./CreateMeeting.css";

class CreateMeeting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      course: "",
      instructor: "",
      time: "",
      link: "",
    };
  }

  render() {
    return (
      <div>
        <a href="/" className="close-create-meeting">
          Close
        </a>
        <form className="create-meeting-form">
          <div className="create-meeting-details">
            <input type="text" name="course" placeholder="Course" />
            <input type="text" name="instructor" placeholder="Instructor" />
            <input type="text" name="time" placeholder="Meeting Times" />
            <input type="url" name="link" placeholder="Meeting Link" />
            <button>Add Meeting</button>
          </div>
        </form>
      </div>
    );
  }
}

export default CreateMeeting;