title: How to update DOM in React.js after submitting form
body: <p>My application is supposed to display notes and allow the user to add a note by submitting a form. When I submit the form I'm not getting a console log from my function that gets all the posts from the server. However, when I refresh the page or omit event.preventDefault() it displays the latest post. How do I make sure getAllNotes() runs after a successful post to the server?</p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        allNotes: [],
        title: "",
        body: ""
      };
    }
  
    getAllNotes() {
      axios
        .get("http://localhost:5000/allnotes")
        .then(res =&gt; {
          const allNotes = res.data;
          console.log("res.data ", res.data);
          this.setState({ allNotes });
        })
        .catch(err =&gt; {
          console.error(err);
        });
    }
  
    // update state based on name of input
    handleChange = event =&gt; {
      this.setState({ [event.target.name]: event.target.value });
    };
  
    handleSubmit = event =&gt; {
      event.preventDefault();
      const { title, body } = this.state;
      const time = moment(Date.now()).format("YYYY-MM-DD HH:mm:ss");
  
      axios
        .post("http://localhost:5000/addnote", { title, body, time })
        .then(result =&gt; {
          this.getAllNotes();
        })
        .catch(err =&gt; {
          console.error(err);
        });
  
      // this.props.history.push("/");
    };
  
    deleteNote(id) {
      // &lt;-- declare id parameter
      axios
        .delete(`http://localhost:5000/delete/${id}`) // &lt;-- remove ;
        .then(() =&gt; {
          // Issue GET request after item deleted to get updated list
          // that excludes note of id
          this.getAllNotes();
        })
        .then(res =&gt; {
          const allNotes = res.data;
          this.setState({ allNotes });
        });
    }
  
    componentDidMount() {
      this.getAllNotes();
    }
  
    render() {
      const { allNotes, title, body } = this.state;
      return (
        &lt;div className="App"&gt;
          &lt;Switch&gt;
            &lt;Route
              exact
              path="/"
              render={() =&gt; (
                &lt;Home allNotes={allNotes} deleteNote={this.deleteNote} /&gt;
              )}
            /&gt;
            &lt;Route
              path="/AddNote"
              render={() =&gt; (
                &lt;AddNote
                  title={title}
                  body={body}
                  handleChange={this.handleChange}
                  handleSubmit={this.handleSubmit}
                /&gt;
              )}
            /&gt;
            &lt;Route path="/EditNote" render={() =&gt; &lt;EditNote /&gt;} /&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <pre><code>import React from "react";
  import Navbar from "react-bootstrap/Navbar";
  import { Link } from "react-router-dom";
  const AddNote = ({ title, body, handleChange, handleSubmit }) =&gt; {
    return (
      &lt;div&gt;
        &lt;Navbar&gt;
          &lt;Navbar.Brand&gt;
            &lt;Link to="/" style={{ textDecoration: "none" }}&gt;
              Notes App
            &lt;/Link&gt;
          &lt;/Navbar.Brand&gt;
        &lt;/Navbar&gt;
        &lt;h1&gt;Add Note&lt;/h1&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;div className="form-group"&gt;
            &lt;label&gt;
              Title
              &lt;input
                type="text"
                className="form-control"
                name="title"
                placeholder="Title"
                value={title}
                onChange={handleChange}
              /&gt;
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div className="form-group"&gt;
            &lt;label&gt;
              Note
              &lt;textarea
                className="form-control"
                name="body"
                rows="3"
                value={body}
                onChange={handleChange}
              /&gt;
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;input type="submit" value="Submit" /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  export default AddNote;
  </code></pre>