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;