title: when button is clicked, Form is redirected to another page But Data is not updating
body: <p>I am giving details in the form and clicking the submit button to populate the data in next page..So, on submit button I have given Link to redirect to the next page.In that page the data should display..But before submission of the data, it is redirecting me to next page and the data I am not able to fetch,But once I refresh the page I am able to see the updated value, Same happening with DELETE button also.
  Can you help me in this?? Thanks in Advance. </p>
  
  <pre><code>export default class App extends Component {
      constructor(props) {
          super(props)
  
          this.state = {
               data:[],
                objEdit:obj
                     }
              }
  
  
  handleInput(e){
      this.state.objEdit[e.target.name] = e.target.value
      this.setState({objEdit:this.state.objEdit})
  }
  
  updateUser = () =&gt;{
      console.log(this.state.objEdit)
      this.state.objEdit.id=null
      axios.post("http://localhost:3000/data/",this.state.objEdit).then(res=&gt;{
          console.log()
           }).catch((error)=&gt;{
          console.log("Error Occured")
      })
  }         
      render() {
          return (
              &lt;div&gt;
  
                  &lt;div className="col-sm-4"&gt;
  
                      &lt;form&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor="fname"&gt;First Name&lt;/label&gt;
                          &lt;input type="text" className="form-control" name="fname" placeholder="Enter First Name" value={this.state.objEdit.fname} onChange={(e)=&gt;{this.handleInput(e)}}/&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor="lname"&gt;Last Name&lt;/label&gt;
                          &lt;input type="text" className="form-control" name="lname" placeholder="Enter First Name" value={this.state.objEdit.lname} onChange={(e)=&gt;{this.handleInput(e)}}/&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor="tel"&gt;Tel&lt;/label&gt;
                          &lt;input type="text" className="form-control" name="tel" placeholder="Tel" value={this.state.objEdit.tel} onChange={(e)=&gt;{this.handleInput(e)}}/&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor="address"&gt;Address&lt;/label&gt;
                          &lt;input type="text" className="form-control" name="address" placeholder="Enter First Name" value={this.state.objEdit.address} onChange={(e)=&gt;{this.handleInput(e)}}/&gt;
                      &lt;/div&gt; 
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor="fname"&gt;City&lt;/label&gt;
                          &lt;input type="text" className="form-control" name="city" placeholder="Enter First Name" value={this.state.objEdit.city} onChange={(e)=&gt;{this.handleInput(e)}}/&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor="state"&gt;State&lt;/label&gt;
                          &lt;input type="text" className="form-control" name="state" placeholder="Enter First Name" value={this.state.objEdit.state} onChange={(e)=&gt;{this.handleInput(e)}}/&gt;
                      &lt;/div&gt; 
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor="zip"&gt;Zip&lt;/label&gt;
                          &lt;input type="text" className="form-control" name="zip" placeholder="Enter First Name" value={this.state.objEdit.zip} onChange={(e)=&gt;{this.handleInput(e)}}/&gt;
                      &lt;/div&gt;    
                  {/* &lt;button onClick={this.updateUser} type="button"&gt;Add&lt;/button&gt; */}
                 &lt;Link to="/Form"&gt;  &lt;button type="button" className="btn btn-primary" onClick={this.updateUser}&gt;Submit&lt;/button&gt;&lt;/Link&gt; 
                      &lt;/form&gt;
                  &lt;/div&gt;
  
                  &lt;/div&gt; 
  
              // &lt;/div&gt;
          )
      }
  }
  
  let obj={
      fname:"",
      lname:"",
      tel:"",
      address:"",
      city:"",
      state:"",
      zip:'',
      id:''
  }
  
  class Form extends Component {
  
      constructor(props) {
          super(props)
  
          this.state = {
               data:[],
  
              }
              }
              componentDidMount(){
                  fetch('http://localhost:3000/data')
                  .then(response =&gt; response.json())
                  .then(user =&gt; this.setState({data:user}))
              }
              editUser=(obj,index)=&gt;{
                  console.log(obj,index)
                  this.setState({objEdit:obj})
              }
              deleteUser=(i)=&gt;{
                  console.log("deleteUser called",i)
                  axios.delete("http://localhost:3000/data/"+this.state.data[i].id).then(res=&gt;{
                      console.log()
                  }).catch((error)=&gt;{
                      console.log("Error Occured")
                  })
              }
  
    render() {
      return (
        &lt;div&gt;
           &lt;div className="row"&gt;
                      &lt;div className="col-sm-8"&gt;
                      &lt;table className="table"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                          &lt;th&gt;First Name&lt;/th&gt;
                          &lt;th&gt;Last Name&lt;/th&gt;
                          &lt;th&gt;Tel&lt;/th&gt;
                          &lt;th&gt;Address&lt;/th&gt;
                          &lt;th&gt;City&lt;/th&gt;
                          &lt;th&gt;State&lt;/th&gt;
                          &lt;th&gt;Zip&lt;/th&gt;
                          &lt;th&gt;Edit&lt;/th&gt;
                          &lt;th&gt;Delete&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
  
                      &lt;tbody&gt;
                          {this.state.data.map((obj,i)=&gt;{
                              return &lt;tr key={i}&gt;{Object.keys(obj).map((property)=&gt;{
                                  return &lt;td key={property}&gt;{obj[property]}&lt;/td&gt;
  
                              })}&lt;td&gt;&lt;button onClick={()=&gt;{this.editUser(obj,i)}} className="btn btn-info"&gt;Edit&lt;/button&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;button onClick={()=&gt;{this.deleteUser(i)}} className="btn btn-danger"&gt;Delete&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
                          })}
                      &lt;/tbody&gt;
  
                  &lt;/table&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  
  
  export default Form;
  </code></pre>
  
  <p>When I Click on SUbmit Button, It should redirect me to next page with updated values And edit and delete button also should work properly without refreshing the page.</p>