When the component initially loads, it does a get request to the database to build the table with the initial data. This works fine. The table is then comprised of child components. The components with data then have an update and delete button. It then loads one final child component with no data, just blank inputs and a save button. When the user clicks Save or Delete, I would like the table to re render to reflect these changes. This is where I am stuck.

I have tried calling the axios.get method after these buttons are clicked, changing the state, forceRender(), none of these reload the parent component.

Parent Comp

```
class ParentComp extends Component{
    constructor(props){
      super(props)
      this.handler = this.handler.bind(this);
      this.state = {
        data: [],
        loading: false,
        newInput: false,
      }
    }

    componentDidMount(){
      this.GetData();
    }

    handler(){
      this.setState({newInput: true});
      console.log("Called");
    } 

    GetData(){
      axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';
      const header = {
        headers:{
          'Authorization': "Bearer " + sessionStorage.getItem('JWTAccess')
        }
      }
      axios.get("tableData/", header)
          .then(response => {
            this.setState({data: response.data,
              loading: true
            });
            console.log(this.state.expenses);
          })
          .catch(error => {
            console.log(error);
      })
    }

    render(){
        return(
          <div>
            <table>
            <tbody>
              <tr>
                <th>Name</th>
                <th>Value</th>
              </tr>
                {this.state.data.map(
                expenses => {
                return(                
                 <ChildComp key={Math.random()} name={data.title} dataId={data.id} value={data.value} empty={false} action={this.handler}/>                 
                );
                }
                )}
                < ChildComp key={Math.random()} name={''} dataId={''} value={''} empty={true} action={this.handler}/>
              </tbody>
            </table>
          </div>
        );
      }
  }
export default ParentComp;

```

Child Component with one of the axios calls (to not spam the thread):

```
class childComp extends Component{
    constructor(props){
        super(props)
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handlePut = this.handlePut.bind(this);
        this.handleDelete = this.handleDelete.bind(this);       
        this.handleButtons = this.handleButtons.bind(this);
        this.action = this.handleButtons.bind(this);
        this.state = {
            dataId: this.props.dataId,
            name: this.props.name,
            value: this.props.value,
            empty: this.props.empty
        }
    }

    PostData(){
        axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';
        const header = {
          headers:{
            'Authorization': "Bearer " + sessionStorage.getItem('JWTAccess')
          }
        }
        const payload = {
          title: this.state.name,
          cost: this.state.value
        }
        axios.post("tableData/", payload, header)
            .then(response => {
                console.log(response);
              })
            .catch(error => {
              console.log(error);
        })
      }

      handleDelete(){
          this.DeleteData();
          this.props.action();
      }

      handlePut(){
          this.PutData();
      }
      handleSubmit(){
        this.PostData();
        this.props.action();
      }

      handleButtons(){
          if(this.state.empty){
              return(
                  <td><button onClick={this.handleSubmit}>Save</button></td>
              )
          }
          else{
              return(
                <td><button onClick = {this.handlePut}>Update</button><button onClick = {this.handleDelete}>Delete</button></td>
              )
          }
      }

    render(){
        return(
            <tr>
                <td><input
                  type="text"
                  name="name"
                  placeholder="name"
                  value={this.state.name}
                  onChange={e => this.setState({ name: e.target.value })}
                /></td>
                <td>$<input
                  type="text"
                  name="value"
                  placeholder="value"
                  value={this.state.value}
                  onChange={e => this.setState({ value: e.target.value })}
                /></td>
                {this.handleButtons()}
            </tr>
        );
    }
};
export default ChildComp;

```

My end goal is for the parent comp to re render the table or entire component after the save (handleSubmit()) or delete (handleDelete()) buttons are clicked. Sorry if I posted a lot of code, I am still very new to JavaScript and React so I am still figuring out what the relevant information is. 
Thanks for the input!