title: Form validation not working when passing data from one component to another
body: <p>I am new to React Js and I had to pass data from one component to another component. My question was solved here:</p>
  <p><a href="https://stackoverflow.com/questions/66676556/how-to-copy-input-data-from-one-component-to-another-component?noredirect=1#comment117871165_66676556">How to copy input data from one component to another component?</a></p>
  <p>However, the first form in here can be submitted without any validation. how can I validate the first form so that it does not redirect to another page whilst being empty?</p>
  <p>The code is as follows:</p>
  <pre><code>const BookingBar = () =&gt; {
      const classes = useStyles();
      const [formData, setFormData] = useState({
          appliance: &quot;&quot;,
          zipcode: &quot;&quot;
        });
      const handleUpdate = e =&gt;
      setFormData({
        ...formData,
        [e.target.name]: e.target.value
      });
  
    const { appliance, zipcode } = formData;
      return(
        &lt;div style={{ display: 'flex', flexFlow: 'Column wrap',  justifyContent: 'center', margin: 'auto', padding: '0px 30px', lineHeight: '1.2em'}}&gt;
                      &lt;div&gt;
                          &lt;Typography variant=&quot;h6&quot; style={{color: 'black', fontFamily: 'Ubuntu',   lineHeight:&quot;1.6em&quot;, textAlign: 'left', fontWeight: '400'}}&gt;
                              I need an Engineer to repair my&amp;nbsp;
                          &lt;/Typography&gt;
                      &lt;/div&gt;
                      &lt;div &gt;
                          &lt;FormControl style={{width: '60%'}}&gt;
                              &lt;Select 
                                  value={appliance}
                                  name=&quot;appliance&quot;
                                  id=&quot;demo-customized-select-native&quot;
                                  input={&lt;BootstrapInput /&gt;}
                                  onChange={e =&gt; handleUpdate(e)}
                                &gt;
                                &lt;MenuItem value={'Refrigerator'}&gt;Refrigerator&lt;/MenuItem&gt;
                                &lt;MenuItem value={'Freezer'}&gt;Freezer&lt;/MenuItem&gt;
                                &lt;MenuItem value={'Ice Maker'}&gt;Ice Maker&lt;/MenuItem&gt;
                                &lt;MenuItem value={'Range'}&gt;Range&lt;/MenuItem&gt;
                                &lt;MenuItem value={'Cooktop'}&gt;Cooktop &lt;/MenuItem&gt;
                                &lt;MenuItem value={'Oven'}&gt;Oven &lt;/MenuItem&gt;
                                &lt;MenuItem value={'Microwave'}&gt;Microwave&lt;/MenuItem&gt;
                                &lt;MenuItem value={'Washing Machine'}&gt;Washing Machine&lt;/MenuItem&gt;
                                &lt;MenuItem value={'Clothes Dryer'}&gt;Clothes Dryer&lt;/MenuItem&gt;
                                &lt;MenuItem value={'Dishwasher'}&gt;Dishwasher&lt;/MenuItem&gt;
                                &lt;MenuItem value={'Garbage Disposal'}&gt;Garbage Disposal&lt;/MenuItem&gt;  
                                &lt;MenuItem value={'Trash Compactor'}&gt;Trash Compactor&lt;/MenuItem&gt;
                              &lt;/Select&gt;
                          &lt;/FormControl&gt;&amp;nbsp;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;Typography variant=&quot;h6&quot; style={{color: 'black', fontFamily: 'Ubuntu',   lineHeight:&quot;1.6em&quot;, textAlign: 'left', fontWeight: '400'}}&gt;
                           in&amp;nbsp;
                          &lt;/Typography&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;FormControl style={{width: '60%'}}&gt;
                              &lt;BootstrapInput 
                                  value={zipcode}
                                  name=&quot;zipcode&quot;
                                  onChange={e =&gt; handleUpdate(e)}  
                                  type=&quot;number&quot; 
                                  id=&quot;demo-customized-textbox&quot; 
                                  placeholder=&quot;Zip Code&quot;/&gt;
                          &lt;/FormControl&gt;  &amp;nbsp;   
                      &lt;/div&gt;
                      &lt;div style={{paddingTop: '1em'}}&gt;
                        &lt;Link to={`../Repair/${zipcode}/${appliance}`}&gt;
                            &lt;Button 
                                    variant=&quot;contained&quot; 
                                    fullwidth 
                                    type=&quot;submit&quot;
                                    size='large' 
                                    style={{
                                        backgroundColor: 'white', 
                                        color: '#153f5f', 
                                        textTransform: 'unset', 
                                        fontFamily: 'ubuntu', 
                                        fontWeight: '500', 
                                        fontSize: '14px', 
                                        borderRadius: &quot;35px&quot;,
                                        padding: '10px 0px!important',
                                    }}&gt;
                                            Go
                            &lt;/Button&gt;
                        &lt;/Link&gt;    
                      &lt;/div&gt;
          &lt;/div&gt;
      )};
  
  export default BookingBar;
  </code></pre>
  <p>Any help would be appreciated. Thank you</p>