title: Edit and Delete functionality is not working as Excepted
body: <p>I Have a form,when I submit the details of that form,It will redirect to next page and date will display there. There itself I have two buttons to Edit and Delete.That two Functionality is not working..
  Can you help me in this?? Thanks in Advance.. </p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from "axios";
  import {withRouter} from 'react-router';
  
   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})
  // }
  
  handleInput(e){
  
      this.setState({
          objEdit:{...this.state.objEdit, [e.target.name] : e.target.value}
      })
  
  }
  
  updateUser = () =&gt;{
      console.log(this.state.objEdit)
      const objEdit = {...this.state.objEdit, id: null};
      axios.post("http://localhost:3000/data/", objEdit).then(()=&gt;{
       this.props.history.push('/Form')
           }).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 type="button" className="btn btn-primary" onClick={this.updateUser}&gt;Submit&lt;/button&gt;
                      &lt;/form&gt;
  
                  &lt;/div&gt;
  
                  &lt;/div&gt; 
  
              // &lt;/div&gt;
          )
      }
  }
  export default withRouter(App);
  </code></pre>
  
  <p>Here my Edit and Delete Function are there.I have two buttons to Edit and Delete.That two Functionality is not working..</p>
  
  <pre><code> let obj={
          fname:"",
          lname:"",
          tel:"",
          address:"",
          city:"",
          state:"",
          zip:'',
          id:''
      }
  
      import React, { Component } from 'react'
      import axios from "axios";
      import { Link } from 'react-router-dom';
  
  
  
          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;Link to ="/"&gt;  &lt;button type="button" className="btn btn-primary" &gt;Back&lt;/button&gt;&lt;/Link&gt; 
                          &lt;/table&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                &lt;/div&gt;
              )
            }
          }
          export default Form;
  </code></pre>