How to properly setState to array of objects?

Question

I have an array ob objects that creates Close buttons depending on how many there are of them. When i click Close button i would expect the array to be updated (removed) then the button element will disappear from screen.

I have worked out in console.log but unable to properly do setState :(

Example code here: https://codesandbox.io/s/sharp-kilby-hn2d9

Any help would be greatly appreciated, i believe it's just the formatting of setState i need to do it properly, but because its array of an objects and so on i just cant figure that one out.

Please put your code in your question, not linked to an external site. — zero298, Dec 16 '19 at 21:46
Or if you want to [add an item to the state](https://stackoverflow.com/q/26253351/1218980). — Emile Bergeron, Dec 16 '19 at 21:56
Emile i tried but failing, i think I'm just writing setState incorrectly. — Marius, Dec 16 '19 at 22:31

dader · Answer 1 · 2019-12-16T22:06:07.607

-1

Here is your handleclick function rewritten, you forgot to return the state at the end after modifying it according to your needs :

  handleClick = i => {
    this.setState(state => {
      var newState = {allProjects: []};
      for (let z = 0; z < state.allProjects.length; z++) {
        const element = state.allProjects[z].employees;
        const items = element.filter(item => item !== i);
        console.log('filter', items);
        console.log('===========');
        newState.allProjects[z] = Object.assign({}, state.allProjects[z]);
        newState.allProjects[z].employees = items;
      }
      return newState;
    });
  };

edited Dec 16 '19 at 22:06

answered Dec 16 '19 at 21:40

dader

1,304
1
12
31

1

This mutates the current state, which is forbidden in React. – Emile Bergeron Dec 16 '19 at 21:51
You should try it yourself by removing the "return state;" at the end and realize that it does not mutates the current state, otherwise the return statement wouldn't be required for it to work. Or am I wrong ? – dader Dec 16 '19 at 21:56
1

`state.allProjects[z].employees = items` mutates the `state` reference you're using. – Emile Bergeron Dec 16 '19 at 21:57
oh, indeed, I make the correction. – dader Dec 16 '19 at 22:00
1

Emile, is it ok now ? – dader Dec 16 '19 at 22:06

How to properly setState to array of objects?

1 Answers1