title: React form with <Popup> alert message instead of alert()
body: <p>I am trying to create a contact form in React. It sends the email. Everything is working fine. What I would like to achieve is to replace the alert('') with a better looking &lt; Popup> message using react Popup package.
  Here is the code: </p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import '../css/Contact.css';
  import axios from 'axios';
  import Popup from "reactjs-popup";
  
  class Contact extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              name: '',
              email: '',
              message: '',
              isValid: false
          };
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
          this.validationCheck = this.validationCheck.bind(this);
      }
  
      handleChange = (event) =&gt; {
          const name = event.target.id;
          const value = event.target.value;
          this.setState ({ [name] : value});
  
      }
  
      validationCheck () {
  
          if((this.state.name.length)&gt;3 &amp;&amp;
             (this.state.message.length)&gt;5 &amp;&amp;
             (this.state.email.length)&gt;7 &amp;&amp;
             (this.state.email.includes("@")) &amp;&amp;
             (this.state.email.includes(".")) &amp;&amp;
             ((this.state.name || this.state.message || this.state.message)!=0)
             )
          {
              this.setState({ isValid: true});
              this.forceUpdate();
          };
  
      }
  
      async handleSubmit (event) {
          this.validationCheck();
          this.forceUpdate();
          if ((this.state.isValid) === true) {
              event.preventDefault();         
              const { name, email, message } = this.state;
              const form = await axios.post('/api/form', {
              name,
              email,
              message
             });
                  alert('thank you for your message');
                  event.target.reset();
  
  
          }
          else {
              event.preventDefault();
              alert('you might have entered something wrong');
          }
  
  
          }
  
  
      render() {    
          return (
          &lt;div className="contact"&gt;
          &lt;h1&gt;Contact Me&lt;/h1&gt;
          &lt;form id="form" onSubmit={this.handleSubmit}&gt;
            &lt;div&gt;
              &lt;label htmlFor="Name" className="badge badge-secondary"&gt;Name&lt;/label&gt;
              &lt;input 
              onChange={this.handleChange} id="name" className="form-control" placeholder="Enter your name here."/&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;label htmlFor="Email" className="badge badge-secondary"&gt;Email address&lt;/label&gt;
              &lt;input 
              onChange={this.handleChange}
              id="email"
              className="form-control"
              placeholder="Enter your e-mail address here." /&gt;
            &lt;/div&gt;
            &lt;div className=""&gt;
              &lt;label htmlFor="Message" className="badge badge-secondary"&gt;Message&lt;/label&gt;
              &lt;textarea 
              onChange={this.handleChange} rows="4"
              className="form-control" id="message" placeholder="Enter your message here."&gt;&lt;/textarea&gt;
            &lt;/div&gt;
            &lt;button 
               type="submit" 
               form="form" 
               className="btn btn-secondary btn-lg button" 
               id="submit"
               value="Submit"&gt; Send! &lt;/button&gt;
  
          &lt;/form&gt;
          &lt;hr /&gt;
          &lt;button type="button" className="btn btn-outline-info" onClick={this.props.scrollToTop}&gt;
          Scroll me back to the top!&lt;/button&gt;
  
          &lt;/div&gt;
          );
      }
  
  }
  
  export default Contact;
  </code></pre>
  
  <p>I have tried to replace 'alert('thank you for your message');' with return(&lt; Popup>); but that is clearly not a way forward.</p>