Refresh Table After Action In React

Hi i tried to make a MERN app but there's a thing, when i udate or delete there no refresh of the page, how can i do it? i create an index where i list all my entries // index

Solution 1:

It looks like you only get the business data from the API in the componentDidMount of the Index Component.

Instead, you should have a method that gets the data from the API and call it both in the componentDidMount and in the .then of the delete method in TableRow.

For example:

componentDidMount(){
  this.getBusinessData();
}
getBusinessData() {
    axios.get('http://localhost:4000/business')
      .then(response => {
        this.setState({ business: response.data });
      })
      .catch(function (error) {
        console.log(error);
      })
}
tabRow(){
  returnthis.state.business.map(function(object, i){
      return<TableRowobj={object}getBusinessData={this.getBusinessData}key={i} />;
  });
}

And in TableRow:

delete() {
    axios.get('http://localhost:4000/business/delete/'+this.props.obj._id)
        .then(() => {
            console.log('Deleted'));
            this.props.getBusinessData();
        })
        .catch(err =>console.log(err))
}

Note that you have to pass the method down to the TableRow as a prop as well so that it can access it.

Solution 2:

in your delete function you should update state

delete() {
        axios.get('http://localhost:4000/business/delete/'+this.props.obj._id)
            .then(()=>{
                        let list=this.state.business.filter((item)=>return (item.id===this.props.obj._id))
                        this.setState({business:list})}
            .catch(err =>console.log(err))
    }

idk how to delete in your case cause i don't know list but it should be similar

Solution 3:

You must update your data in the callback of your delete/edit request.

Currently, you just log that the deletion was successful.