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 = {
  currentSeries: null,
  currentRowIndex: null,
  rows: [
    {
      id: shortid.generate(),
      nodes: [], 
      series: [], // array with item I want to remove
    },
  ],
};

and my remove item call:

onRemoveModelElementClick = (rowId, modelElementId) => {
  this.setState((prevState) => {
    const index = prevState.rows.findIndex(x => x.id === rowId);
    const series = prevState.rows[index].series.filter(s => s.id !== modelElementId);
    return series;
  });
};

I tried spreading the remaining state is several ways but it does not seem to update properly. I the rowId and modelElementId are correct and I can verify they do filter the correct item out. I am just having trouble on what to return. I know it is something simple but for the life of me I can't see it.

Dom · Accepted Answer · 2019-04-09 20:49:53Z

2

My recommendation would be to use .map to make things are bit easier to digest. You can then write it like so:

onRemoveModelElementClick = (rowId, modelElementId) => {
  const updatedRowsState = this.state.rows.map(row => {
    // this is not the row you're looking for so return the original row
    if (row.id !== rowId) {
      return row;
    }

    const filteredSeries = row.series.filter(s => s.id !== modelElementId);
    return {
      // spread properties (id, node, series)
      ...row,
      // overwrite series with item filtered out
      series: filteredSeries,
    };
  });

  // since rest of the state doesn't change, we only need to update rows property
  this.setState('rows', updatedRowsState);
}

Hope this helps and let me know if you have any questions.

answered Apr 9, 2019 at 20:49

Dom

40.7k12 gold badges56 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cbutler Over a year ago

This is a great idea. What you wrote does not work out of the box but it got me to a solution so I'm accepting it. I will add an answer for what I did to get it to work as well.

Jake Worth · Accepted Answer · 2019-04-09 20:54:46Z

0

I think the issue here is how your code uses setState. The setState function must return an object. Assuming your filtering functions are correct as you describe, return an object to update the state:

return { series };

setState documentation

answered Apr 9, 2019 at 20:54

Jake Worth

5,9491 gold badge28 silver badges36 bronze badges

Comments

cbutler · Accepted Answer · 2019-04-10 06:05:53Z

0

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!

answered Apr 10, 2019 at 6:05

cbutler

1,5355 gold badges22 silver badges38 bronze badges

Collectives™ on Stack Overflow

React - remove nested array item using setState function call

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related