score:3

Accepted answer

You should map data into your child.

Change your parent like this:

class ParentComponent extends React.Component {
  state = { 
      data : [] 
  }

  componentDidMount() {
      this.getData();
  }
    
  getData = () => axios.get("link/").then(res => this.setState({data: res.data});
    
  deleteData = (id) => axios.get("deleteLink/" + id).then(res => this.getData())
       .catch(err => { console.log(err) });

  render() {
    return (
      <div>
        <table>
          <thead></thead>
          <tbody>
            {this.state.data.map(x => <ChildComponent row={x} deleteData={this.deleteData} />)}
          </tbody>
        </table>
      </div>
    )
  }
}

And your child component should be like this

const ChildComponent = ({row,deleteData}) => (
      <tr>
        <td>{row.id}</td>
        <td>{row.name}</td>
        <td><button onClick={() => deleteData(row.id)}>Delete</button></td>
      </tr >
    )

score:1

I can't find an issue in your code, the only way I can help is to tell you how I would debug it.

edit parent like so:

class ParentComponent extends React.Component {
  state = { 
    data : [] 
  }

  componentDidMount() {
    // You are right when you say this should works, so 
    // stick to it until the bug is fixed
    
    console.log("parent mounted");
    this.getData();
  }
  
  // retrieves array of data from db
  getData = () => {
    console.log("fetching data");

    axios.get("link/").then(res => {
      console.log("fetched data", res.data);
      this.setState({data: res.data});
    });
  }  

  render() {
    return (
      <div>
        <ChildComponent 
          data={this.state.data}
          refetch={this.getData}
        />
      </div>
    )
  }
}

and in the child component add these 2 lifecycle methods just for debugging purposes:

componentDidMount () {
   console.log("child mounted", this.props.data)     
}

componentDidUpdate (prevProps) {
   console.log("old data", prevProps.data);
   console.log("new data", this.props.data);
   console.log("data are equal", prevProps.data === this.props.data);
}

if you can share the logs I can try help you more


Related Query

More Query from same tag