How to setState to update an array in React?

Question

I need to update an array in the state of my component in React. I've seens several topic with this question, but so far all of them are adding new items to the array with the spread operator, but I need to add OR remove items on a callback like this:

  handleCheck (newStatus, isChecked) {
    this.setState({ filterStatus: [...this.state.filterStatus, newStatus] })
  }

But the problem here is that it didn't work for status where the isChecked boolean comes false to remove them from the array

What is the best way to add or remove items from that array, hopefully with spread operator?

Thanks

to acess the previous state pass an function to this.setState that returns the new state, something like: this.setState(prevState => ({ filterStatus: [...prevState.filterStatus, newStatus] })). Try it, maybe it solves your problem. — Gabriel Carneiro
– Gabriel Carneiro, Commented Jun 8, 2018 at 15:09
I am not sure if your question is clear. When isChecked is true, you need to remove the "newStatus" from the array? or you need to return an array with only the newStatus? — Murilo Cruz
– Murilo Cruz, Commented Jun 8, 2018 at 15:11
I need to update the array by adding OR removing the newStatus depending on the isChecked boolean value. If it's true then adding iot, if it's false, remove it — Leonardo Uribe
– Leonardo Uribe, Commented Jun 8, 2018 at 15:13
array of what man? I think you problem is not in the array but in the comments, remember the objects are passed by reference, you need to remove em, probably normalize your data would be better? but it is something like a array of number, just make a new copy of the array and put in on the state — andresmijares
– andresmijares, Commented Jun 8, 2018 at 15:14
an array of strings... for example: ['seven', 'four', 'six'] — Leonardo Uribe
– Leonardo Uribe, Commented Jun 8, 2018 at 15:16

Murilo Cruz · Accepted Answer · 2018-06-08 15:17:54Z

5

try to use the .filter to remove the element. Remember to duplicate the array (using [...array] syntax) before using .filter, to don't change the original array:

handleCheck (newStatus, isChecked) {
    let newArray = isChecked? // if isChecked is true
        [...this.state.filterStatus, newStatus] : // add element
        [...this.state.filterStatus].filter(e => e !== newStatus); // remove the elements that are equal to newStatus
    this.setState({ filterStatus: newArray})
}

answered Jun 8, 2018 at 15:17

Murilo Cruz

2,5711 gold badge19 silver badges19 bronze badges

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

Comments

Simon Mulquin · Accepted Answer · 2018-06-08 16:26:40Z

0

Think it functionnal !

const prevArray = this.state.array;
const itemsToAdd = [item, item, item];

//this function map the prev array escaping elements to remove 
//and then push itemsToAdd to the new array
const updateArray = ( i = [0], newArray = [] ) => 
  i < prevArray ? 
    yourRemovingCondition(prevArray[i]) ? 
      updateArray( i + 1, newArray ) 
    : updateArray( i + 1, [...newArray, prevArray[i])
  : [...newArray, ...itemsToAdd]
;

setState({array: updateArray()];

answered Jun 8, 2018 at 16:26

Simon Mulquin

1567 bronze badges

Comments

Mayank Shukla · Accepted Answer · 2018-06-08 15:11:54Z

-1

Put the check, add the element only when the bool isChecked is true, otherwise use filter to remove the element from the array.

Like this:

handleCheck (newStatus, isChecked) {
    this.setState(prevState => { 
        let filterStatus;
        if (isChecked) {
            filterStatus = [...prevState.filterStatus, newStatus];
        } else {
            filterStatus = prevState.filterStatus.filter(el => el.id !== newStatus.id)
        }
        return { filterStatus }
    })
}

Note: In place of id in filter callback method use the correct unique property name.

answered Jun 8, 2018 at 15:11

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Collectives™ on Stack Overflow

How to setState to update an array in React?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related