React - remove nested array item using setState function call

Question

I am trying to remove a (semi) deeply nested item from an array using setState but it doesn\'t seem to be working. My state is structured as follows:

state = {
         


        

Answer 1

Here is what I did to get it working in case it can help someone else:

onRemoveModelElementClick = (rowId, modelElementId) => {
  this.setState((prevState) => {
    const updatedRowState = prevState.rows.map((row) => {
      if (row.id !== rowId) {
        return row;
      }

      const filteredSeries = row.series.filter(s => s.id !== modelElementId);
      return {
        ...row,
        series: filteredSeries,
      };
    });
    return {
      rows: updatedRowState,
    };
  });
};

All credit to Dom for the great idea and logic!