title: Page gets reloaded on form submit.Why?
body: <p>I have implemented a controlled Form using react hooks.
  I have also added the event.preventDefault() call to the form submit handler.
  But for some reason, the form submit always causes a page refresh even then.
  I am not sure why.</p>
  <p>I have checked other threads in StackOverflow and checking the answers, what I did is correct.
  I am just not able</p>
  <p>Below is my code..
  What am I doing wrong?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React,{useState} from 'react';
  import style from './style.css'
  import {Link,useParams} from 'react-router-dom'
  import {useDispatch,useSelector} from 'react-redux'
  import {builderUpdateRequest,selectBuilders} from "../../data/builder"
  
  
  const PageBuilderForm=()=&gt;{
      let { id } = useParams();
  
      const allBuilders=useSelector(selectBuilders)
      const selectedBuilder=allBuilders?allBuilders.find(x=&gt;x.id==id):null;
      const [formData,setFormData]=useState(selectedBuilder)
      const dispatch=useDispatch();
  
      const onSubmitHandler=(e)=&gt;{ 
          e.preventDefault();
          dispatch(builderUpdateRequest(formData));
      }
  
      const handleChange=(e)=&gt;{
          const newFormData={ ...formData};
          newFormData[e.currentTarget.name]=e.currentTarget.value;
          setFormData({
              ...newFormData,
          })
      }
  
      if(selectedBuilder){
          return(
          &lt;div className={style.formContainer}&gt;
              &lt;form className={style.form} onSubmit={onSubmitHandler}&gt;
                  &lt;div className={style.formLabel}&gt;Developer Logo Image URL&lt;/div&gt;
                  &lt;div className={style.formField}&gt;&lt;input type="url" name="logo" value={formData.logo} onChange={handleChange} required/&gt;&lt;/div&gt;
  
  
                  &lt;div className={style.formLabel}&gt;Developer Name&lt;/div&gt;
                  &lt;div className={style.formField}&gt;&lt;input type="text" name="title" value={formData.title} onChange={handleChange} required/&gt;&lt;/div&gt;
  
  
                  &lt;div className={style.formLabel}&gt;Years of Experience&lt;/div&gt;
                  &lt;div className={style.formField}&gt;&lt;input type="number" name="totalExp" value={formData.totalExp} onChange={handleChange} required/&gt;&lt;/div&gt;
  
  
                  &lt;div className={style.formLabel}&gt;Projects Count&lt;/div&gt;
                  &lt;div className={style.formField}&gt;&lt;input type="number" name="totalProjects" value={formData.totalProjects} onChange={handleChange} required/&gt;&lt;/div&gt;
  
  
                  &lt;div className={style.formLabel}&gt;Description&lt;/div&gt;
                  &lt;div className={style.formField}&gt;&lt;input type="text" name="desc" value={formData.desc} onChange={handleChange} required maxlength={200}/&gt;&lt;/div&gt;
  
  
                  &lt;div className={style.formLabel}&gt;Project Name&lt;/div&gt;
                  &lt;div className={style.formField}&gt;&lt;input type="text" name="imgTitle" value={formData.imgTitle} onChange={handleChange} required maxlength={40}/&gt;&lt;/div&gt;
  
  
                  &lt;div className={style.formLabel}&gt;Project Location&lt;/div&gt;
                  &lt;div className={style.formField}&gt;&lt;input type="text" name="location" value={formData.location} onChange={handleChange} required maxlength={40}/&gt;&lt;/div&gt;
  
  
                  &lt;div className={style.formLabel}&gt;Project image URL&lt;/div&gt;
                  &lt;div className={style.formField}&gt;&lt;input type="url" name="imgURL" value={formData.imgURL} onChange={handleChange} required/&gt;&lt;/div&gt;
  
                  &lt;div className={style.formField}&gt;
                      &lt;input type="submit" value="Update"/&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
              &lt;Link className={style.home}to="/"&gt;Go Home&lt;/Link&gt;
          &lt;/div&gt;
      )
      }
      else{
          return &lt;Link className={style.home}to="/"&gt;Go Home&lt;/Link&gt;
      }
      
  }
  
  export default PageBuilderForm;</code></pre>
  </div>
  </div>
  </p>