title: A better way to handle async callbacks and rendering DOM
body: <p>I'm currently using <code>nodemailer</code> to send email from <code>reactjs</code> and following is my code:</p>
  
  <pre><code>  constructor(props) {
      super(props);
      this.state = {
        fullname: "",
        email: "",
        companyName: "",
        phoneNumber: "",
        message: ""
      };
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
  
    async handleSubmit(e) {
      e.preventDefault();
      let { fullname, email, companyName, phoneNumber, message } = this.state;
      let form = await axios.post("/api/form", {
        fullname,
        email,
        companyName,
        phoneNumber,
        message
      });
      /**
       * I'm not proud of using jQuery in reactjs
       * Will need to get a better way to do this
       */
  
      if (form.status === 200) {
        $("#success").show();
        $("[name='fullname']").val("");
        $("[name='email']").val("");
        $("[name='companyName']").val("");
        $("[name='phoneNumber']").val("");
        $("[name='message']").val("");
    // As per comments and HS' answer
    this.setState({
      fullname: "",
      email: "",
      companyName: "",
      phoneNumber: "",
      message: ""
    })
      }
    }
  </code></pre>
  
  <p>Now, the problem is jQuery and clearance of the form. How can I manipulate the DOM on <code>(form.status === 200)</code> i.e. to clear the form and show success message?</p>
  
  <p>What I've done is the dirtiest way possible and is a hack. How would a ReactJS expert do it?</p>