title: AXIOS PUT request returns a 200 code but doesn't update content?
body: <p>So I have a a component that returns a 200 code but for some reason the content does not update at all after I click the submit button. My goal is to update the 4 divs inside the form after submitting the form. The course state contains properties that contain info about each course, those properties are _id, description, estimatedTime, materialsNeeded and title.</p>
  
  <p>Can someone help? </p>
  
  <pre><code>class UpdateCourse extends Component {
    constructor(props) {
      super(props);
      this.state = {
        course: []
      };
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    change = e =&gt; {
      this.setState({
        [e.target.name]: e.target.value
      });
    };
  
    handleSubmit = event =&gt; {
      const {
        match: { params }
      } = this.props;
      event.preventDefault();
  
      const updateCourse = {
        title: this.state.course.title,
        description: this.state.course.description,
        estimatedTime: this.state.course.estimatedTime,
        materialsNeeded: this.state.course.materialsNeeded
      };
  
      axios({
        method: "put",
        url: `http://localhost:5000/api/courses/${params.id}`,
        auth: {
          username: window.localStorage.getItem("Email"),
          password: window.localStorage.getItem("Password")
        },
        data: updateCourse
      })
        .then(response =&gt; {
          //if the response came back as 204 then alert the user that the course was successfully updated, if another code came back then redirect them to the error handler
          if (response.status === 204) {
            alert("The course has been successfully updated!");
            this.props.history.push("/");
          } else {
            throw new Error();
          }
        })
        .catch(err =&gt; {
          //use a catch method to catch the errors and display them is the status code comes back as 400
          console.log("CATCH =", err.response.data.errors);
          this.setState({
            //if there were errors, then set the errors state in react to the error messages that came from the REST API
            errors: err.response.data.errors
          });
        });
    };
  
    componentDidMount() {
      const {
        match: { params }
      } = this.props;
      axios
        .get(`http://localhost:5000/api/courses/${params.id}`)
        .then(results =&gt; {
          this.setState({
            course: results.data
          });
        });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;form onSubmit={this.handleSubmit}&gt;
              &lt;div&gt;
                &lt;input
                  id="title"
                  name="title"
                  type="text"
                  className="input-title course--title--input"
                  placeholder="Course title..."
                  defaultValue={this.state.course.title}
                  onChange={e =&gt; this.change(e)}
                /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;textarea
                  id="description"
                  name="description"
                  placeholder={this.state.course.description}
                  defaultValue={this.state.course.description}
                  onChange={e =&gt; this.change(e)}
                /&gt;{" "}
              &lt;/div&gt;
              &lt;div&gt;
                &lt;input
                  id="estimatedTime"
                  name="estimatedTime"
                  type="text"
                  className="course--time--input"
                  placeholder="Hours"
                  defaultValue={this.state.course.estimatedTime}
                  onChange={e =&gt; this.change(e)}
                /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;textarea
                  id="materialsNeeded"
                  name="materialsNeeded"
                  placeholder={this.state.course.materialsNeeded}
                  defaultValue={this.state.course.materialsNeeded}
                  onChange={e =&gt; this.change(e)}
                /&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>