How to refresh page after deleting item in React?

Question

My problem is when I am clicking on the delete button , I can delete the item from table, but I need to refresh page manually. How can I solve to refreshing it automatically? Could anyone solve my problem? I also attached my code section below. Here is my code section, also Home components and RowCreator component as well:

import React from 'react'
import axios from 'axios'
import {Link} from 'react-router-dom'
import '../App.css';
class Home extends React.Component{
    constructor(props) {
        super(props)

        this.state = {
            metersData:[]
    
    
        }
      

    }
     
    
   
    componentWillMount(){
        axios.get('http://localhost:8080/meterservices/api/meters').then(res=>{
            const metersData = res.data;
            this.setState({metersData})

        })
    }
  


    
    render(){
        return (<div>
            <h2>Measuring instruments / Meetinstrumenten:</h2>
            <table align='center'>
                <thead>
                <tr>
                    <th>Id</th>
                    <th>Function of the meters</th>
                    <th>Profile</th>


                </tr>
                </thead>
                <tbody>
                    {this.state.metersData.map(meter =><RowCreator item={meter} />)}


                </tbody>

            </table>
            <br/>
            <Link to={'/addMeter'}><font size="5"><span>Register new Meter device</span></font></Link>


        </div>)
    }
}


class RowCreator extends React.Component{
    
    handleClick = (event) => {
        event.preventDefault();
        var meter = this.props.item;

        console.log(meter.id)
        axios.delete('http://localhost:8080/meterservices/api/meters/'+meter.id).then(res=>{
            
            
            const metersData = res.data;
            this.setState({metersData})

        })
      }

    render(){
        var meter = this.props.item;
        return<tr>
            <td>{meter.id}</td>
            <td>{meter.name}</td>
            <td>{meter.profile_name}</td>
            
            <td ><Link to={'/meterDetails/'+meter.id}><span>Add monthly data</span></Link></td>
            <td><Link to={'/analyze/'+meter.id}><span>Analyze monthly data</span></Link></td>
            <button onClick={this.handleClick} >Delete </button>
            
        </tr>
    }
}

export default Home;

Answer 1

You should handle deletion from parent and update your rows:

import React from 'react'
import axios from 'axios'
import {Link} from 'react-router-dom'
import '../App.css';
class Home extends React.Component{
    constructor(props) {
        super(props)

        this.state = {
            metersData:[]
        }
    }
     
    handleDelete = (meterId) => {
        event.preventDefault();
        var meter = this.props.item;

        console.log(meterId)
        axios.delete('http://localhost:8080/meterservices/api/meters/'+meterId).then(res=>{
            // If successfully deleted, update your metersData on state
            //const metersData = res.data;
            //this.setState({metersData})
        })
      }
   
    componentWillMount(){
        axios.get('http://localhost:8080/meterservices/api/meters').then(res=>{
            const metersData = res.data;
            this.setState({metersData})

        })
    }
  


    
    render(){
        return (<div>
            <h2>Measuring instruments / Meetinstrumenten:</h2>
            <table align='center'>
                <thead>
                <tr>
                    <th>Id</th>
                    <th>Function of the meters</th>
                    <th>Profile</th>


                </tr>
                </thead>
                <tbody>
                    {this.state.metersData.map(meter =><RowCreator item={meter} onDelete={handleDelete} />)}


                </tbody>

            </table>
            <br/>
            <Link to={'/addMeter'}><font size="5"><span>Register new Meter device</span></font></Link>


        </div>)
    }
}


class RowCreator extends React.Component {

    constructor(props) {
        super(props);

        state = {metersData:[]}
    }
    
    render(){
        var meter = this.props.item;
        return<tr>
            <td>{meter.id}</td>
            <td>{meter.name}</td>
            <td>{meter.profile_name}</td>
            
            <td ><Link to={'/meterDetails/'+meter.id}><span>Add monthly data</span></Link></td>
            <td><Link to={'/analyze/'+meter.id}><span>Analyze monthly data</span></Link></td>
            <button onClick={() => this.props.onDelete(meter.id)} >Delete </button>
            
        </tr>
    }
}

export default Home;

Answer 2

I would suggest moving your delete call up to a function in Home that takes an id, and passing that function as a prop to RowCreator.

The state inside the RowCreator is never used and changing it doesn't really help you. What you want is to tell Home that there's been a change and it needs to update its state.