After Button Clicked, Unable to Edit the Data - reactjs

Question

I have a form, After filling the Details and clicking on Submit Button, It will redirect to the next page, There I Have One Edit button to edit the fields. But Edit functionality is working as Excepted.
Can Anyone help me in this?? Thanks in Advance
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.setState({
objEdit:{...this.state.objEdit, [e.target.name] : e.target.value}
})
}
updateUser = () =>{
console.log(this.state.objEdit)
const objEdit = {...this.state.objEdit, id: null};
axios.post("http://localhost:3000/data/", objEdit).then(()=>{
this.props.history.push('/Form')
}).catch((error)=>{
console.log("Error Occured")
})
}
render() {
return (
<div>
<div className="col-sm-4">
<form>
<div className="form-group">
<label htmlFor="fname">First Name</label>
<input type="text" className="form-control" name="fname" placeholder="Enter First Name" value={this.state.objEdit.fname} onChange={(e)=>{this.handleInput(e)}}/>
</div>
<div className="form-group">
<label htmlFor="lname">Last Name</label>
<input type="text" className="form-control" name="lname" placeholder="Enter First Name" value={this.state.objEdit.lname} onChange={(e)=>{this.handleInput(e)}}/>
</div>
<div className="form-group">
<label htmlFor="tel">Tel</label>
<input type="text" className="form-control" name="tel" placeholder="Tel" value={this.state.objEdit.tel} onChange={(e)=>{this.handleInput(e)}}/>
</div>
<div className="form-group">
<label htmlFor="address">Address</label>
<input type="text" className="form-control" name="address" placeholder="Enter First Name" value={this.state.objEdit.address} onChange={(e)=>{this.handleInput(e)}}/>
</div>
<div className="form-group">
<label htmlFor="fname">City</label>
<input type="text" className="form-control" name="city" placeholder="Enter First Name" value={this.state.objEdit.city} onChange={(e)=>{this.handleInput(e)}}/>
</div>
<div className="form-group">
<label htmlFor="state">State</label>
<input type="text" className="form-control" name="state" placeholder="Enter First Name" value={this.state.objEdit.state} onChange={(e)=>{this.handleInput(e)}}/>
</div>
<div className="form-group">
<label htmlFor="zip">Zip</label>
<input type="text" className="form-control" name="zip" placeholder="Enter First Name" value={this.state.objEdit.zip} onChange={(e)=>{this.handleInput(e)}}/>
</div>
<button type="button" className="btn btn-primary" onClick={this.updateUser}>Submit</button>
</form>
</div>
</div>
)
}
}
export default withRouter(App);
let obj={
fname:"",
lname:"",
tel:"",
address:"",
city:"",
state:"",
zip:'',
id:''
}
Here my Edit and Delete Function are there.I have two buttons to Edit and Delete.That two Functionality is not working..
import React, { Component } from 'react'
import axios from "axios";
import { Link } from 'react-router-dom';
import App from './App';
class Form extends Component {
constructor(props) {
super(props)
this.state = {
data:[],
}
}
componentDidMount(){
fetch('http://localhost:3000/data')
.then(response => response.json())
.then(user => this.setState({data:user}))
}
editUser=(obj,index)=>{
console.log(obj,index)
this.setState({objEdit:obj})
}
deleteUser=(i)=>{
console.log("deleteUser called",i)
axios.delete("http://localhost:3000/data/"+this.state.data[i].id).then(res=>{
console.log()
}).catch((error)=>{
console.log("Error Occured")
})
}
render() {
return (
<div>
<div className="row">
<div className="col-sm-8">
<table className="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Tel</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.data.map((obj,i)=>{
return <tr key={i}>{Object.keys(obj).map((property)=>{
return <td key={property}>{obj[property]}</td>
})}<td><button onClick={()=>{this.editUser(obj,i)}} className="btn btn-info">Edit</button></td>
<td><button onClick={()=>{this.deleteUser(i)}} className="btn btn-danger">Delete</button></td></tr>
})}
</tbody>
<Link to ="/"> <button type="button" className="btn btn-primary" >Back</button></Link>
</table>
</div>
</div>
</div>
)
}
}
export default Form;