title: Making inputs required in a React.js form
body: <p>What is the best (and simplest) way to require inputs (name, email, content etc.) in React.js. I have searched for quite a while but there seems to be so many varying no-so-clear ways to do this. Ideally I want the inputs user_name, user_email and message to be require in order for the form to be sent successfully. Any help would be appreciated.</p>
  <pre><code>import React from 'react';
  import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';
  import NavBar from &quot;./NavBar&quot;;
  import Footer from &quot;./Footer&quot;;
  import emailjs from 'emailjs-com';
  import{ init } from 'emailjs-com';
  
  
  
  
   function Contact() {
       
  
      
    function sendEmail(e) {
      e.preventDefault();
  
      emailjs.sendForm('hidden', 'hidden', e.target, 'hidden')
        .then((result) =&gt; {
          alert(&quot;Great, your request has been sent!&quot;); 
          
        }, (error) =&gt; {
          alert(&quot;Oops, something went wrong. Please try again&quot;)
        });
        e.target.reset();
    }
  
    return (
       &lt;div&gt;
          &lt;NavBar /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;MDBContainer&gt;
            &lt;MDBRow className = &quot;formcontainer&quot;&gt;
              &lt;MDBCol md=&quot;6&quot;&gt;
                &lt;form onSubmit={sendEmail}&gt;
                  &lt;p className=&quot;h4 text-center mb-4&quot;&gt;Fill in the information below to contact me!&lt;/p&gt;
                  &lt;br /&gt;
                  &lt;label htmlFor=&quot;defaultFormContactNameEx&quot; className=&quot;grey-text&quot; &gt; Your name &lt;/label&gt;
                  &lt;input type=&quot;text&quot; id=&quot;defaultFormContactNameEx&quot; className=&quot;form-control&quot; name=&quot;user_name&quot; /&gt;
                  &lt;br /&gt;
  
  
                  &lt;label htmlFor=&quot;defaultFormContactEmailEx&quot; className=&quot;grey-text&quot;&gt; Your email &lt;/label&gt;
                  &lt;input type=&quot;email&quot; id=&quot;defaultFormContactEmailEx&quot; className=&quot;form-control&quot; name=&quot;user_email&quot;/&gt;
                  &lt;br /&gt;
  
  
                  &lt;label htmlFor=&quot;defaultFormContactSubjectEx&quot; className=&quot;grey-text&quot;&gt; Subject&lt;/label&gt;
                  &lt;input type=&quot;text&quot; id=&quot;defaultFormContactSubjectEx&quot; className=&quot;form-control&quot; name=&quot;user_subject&quot; /&gt;
                  &lt;br /&gt;
  
  
                  &lt;label htmlFor=&quot;defaultFormContactMessageEx&quot; className=&quot;grey-text&quot;&gt; Your message &lt;/label&gt;
                  &lt;textarea type=&quot;text&quot; id=&quot;defaultFormContactMessageEx&quot; className=&quot;form-control&quot; rows=&quot;7&quot; name=&quot;message&quot;/&gt;
                  &lt;div className=&quot;text-center mt-4&quot;&gt;
                            &lt;MDBBtn color=&quot;warning&quot; outline type=&quot;submit&quot;&gt;
                              Send
                              &lt;MDBIcon far icon=&quot;paper-plane&quot; className=&quot;ml-2&quot; /&gt;
                            &lt;/MDBBtn&gt;
                          &lt;/div&gt;
                        &lt;/form&gt;
                      &lt;/MDBCol&gt;
                    &lt;/MDBRow&gt;
                  &lt;/MDBContainer&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                  &lt;Footer /&gt;
                  &lt;/div&gt;
                );
              };
  
  
  
  export default Contact;
  </code></pre>