Edit and Delete functionality is not working as Excepted - reactjs

Question

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..
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 = () =>{
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>
// </div>
)
}
}
export default withRouter(App);
Here my Edit and Delete Function are there.I have two buttons to Edit and Delete.That two Functionality is not working..
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 => 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;

Answer 1

Delete is a simple. As you are iterating over local state for your data, you need to delete the data from local state when you get success from delete axios call,
deleteUser=(i)=>{
console.log("deleteUser called",i)
axios.delete("http://localhost:3000/data/"+this.state.data[i].id).then(res=>{
console.log("success");
this.state.data.splice(i,1); //This will delete data fro local state.
}).catch((error)=>{
console.log("Error Occured")
})
}
Now for update you cannot directly setState state from some other component where you don't have any relation.
this.setState({objEdit:obj})
This cannot be done, because objEdit is from App component. You don't have any relation between App and Form component.
One way is you can pass obj like, (Just an idea)
editUser=(obj,index)=>{
console.log(obj,index)
this.props.history.push({
pathname:"/", //probablt this is for App component
state: {objEdit : JSON.stringify(obj)}
})
}
Of course you need to wrap Form component using withRouter,
export default withRouter(Form)
Now in App component you can get this data in componentDiMount,
componentDidMount(){
let objEdit = JSON.parse(this.props.location.state.objEdit)
if(objEdit){
this.setState({objEdit})
}
}
Now you will get pre-filled values in your form, you just need to handle the update button functionality.
In your update function you are adding id manually,
const objEdit = {...this.state.objEdit, id: null};
But in this case you need to have check that if objEdit alreay have id, if yes then you need to hit the update API call.