Customize Array State in ReactJs with ES6

Question

i am fetching some data (in array) from api and assigning it to state called items. then calling an Item component for each item of the state by following code:

<div>
          {items.length} results found for {search_term}
          {items.map((item) =>
            (item.active_price > 0 && item.show) ? <Item key={item.id} details={item} items={items} setItems={setItems}/> : ""
          )}
        </div>

The array looks like this:

Next plan is adding a remove button in Item component, which will change value of show to false (for the item clicked) in the items state. What I am thinking is, as the state will change, the items state will be re-rendered and the item turned to false will be hidden from view. I am adding a onCLick event listener on the button and the function is:

const handleClick = () => {
    console.log(({...props.items,[props.details.number - 1]:false}))
    // props.setItems(prevState=>({...prevState,[props.details.number - 1]:false}))
  }

I'll call props.setItems later but for now, I am trying to see if I can just edit that element to turn the show into false. the code above replace the whole index with false.

in the onClick function, I only want to edit the value of show, not replace the entire entry. I have tried:

({...props.items,[props.details.number - 1][show]:false})

and

({...props.items,[props.details.number - 1].show:false})

It shows syntax error before [show] and .show respectively. How can I edit my handleClick function to edit the value of show properly.

Thanks.

GitGitBoom · Accepted Answer · 2021-02-26 15:22:46Z

It looks like you are converting your array into an object in your current method. (the first screen shot is an array, the second is an object). You're going to run into issues there.

To just remove the item from the array, it would be easiest just to use .filter();

const handleClick = () => {
  props.setItems(
    prevState => prevState.filter(item => item.number !== props.details.number)
  );
}

To set the show property is a bit more complicated. This is pretty standard way to do so without mutating.

const handleClick = () => {
  props.setItems(prevState => {
    const itemIndex = prevState.findIndex(
      item => item.number == props.details.number
    );
    // Using 'props.details.number - 1' will not be a valid index when removing items
   return [
     ...prevState.slice(0, itemIndex), // Your state before the item being edited
     {...prevState[itemIndex], show: false}, // The edited item
     ...prevState.slice(itemIndex + 1) // The rest of the state after the item
   ]; 
  });
}

Hirak Deka · Accepted Answer · 2021-02-26 15:18:19Z

0

You can try the following syntax of code, assuming items is state here-

const [items,setItems]=.....

The following is the code

const handleClick = () => {
setItems({
  ...items,
  show: false,
})}

It will update the items state with value show as false.

answered Feb 26, 2021 at 15:18

Hirak Deka

13 bronze badges

Collectives™ on Stack Overflow

Customize Array State in ReactJs with ES6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related