Array element not updating to the opposite of its previous state

Question

I'm trying to update the state of particular index of my array when a function is called. However, the value is not updated despite clicking multiple times.

I have the following array extracted from the const EDITABLES in componentDidMount:

values = EDITABLES.map((data) => {
  return {
    id: data.id,
    value: financials[data.id],
    table: data.table,
    add: false,
    minus: false,
  };
});

this.setState({
        values,
      });

When rendering I map the array like so:

{EDITABLES.map((data, index) => {
              
              console.log(values[index]?.add, "bool"); //despite calling a function to change the state of add in values it remains the same 
              return (
                <Row
                  key={index}
                  style={{
                    gridTemplateColumns: "22% 25% 2% 25% 25% 21%",
                    display: "grid",
                  }}
                >
                  <p>
                    {data.name}
                  </p>
                  <div>
                    <CompleteButton //CompleteButton is a styled div
                      isAdd={values[index]?.add} 
                      onClick={() => {
                        this.changeFalse(index) //function call
                      }}
                    >
                    </CompleteButton>
                  </div>

And this is what the changeFalse function looks like:

    changeFalse(index) {
    this.setState((prevState) => ({
      values: {
        ...prevState.values,
        [prevState.values[index].add]: !prevState.values[index].add,
      },
    }));
  }

No matter how many times I click the button, it does not update and sti;; remains "false" and I'm not sure why

can you try passing index as the argument to arrow function like this onClick={(index) => { this.changeFalse(index) //function call }} — thenaamsake, Apr 09 '21 at 18:14

score 0 · Answer 1 · answered Apr 09 '21 at 17:55

0

Isn't that because you're onClick is on CompleteButton which is a styled.div try putting the onClick to the div above CompleteButton.

answered Apr 09 '21 at 17:55

blue sky

57
3

The function is being called, I added a console.log to confirm – Apr 09 '21 at 17:57
How about trying to force update it? [https://stackoverflow.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate](https://stackoverflow.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate) – blue sky Apr 09 '21 at 17:58
Do you have an example of how to use forceUpdate here? I'm getting a `TypeError: Cannot read property 'values' of undefined` if I keep my code same as posted except change `this.setState` to `this.forceUpdate` in the second line of the `changeFalse` function – Apr 09 '21 at 18:10
I wonder why you're key is `[prevState.values[index].add]` isn't `prevState.values[index].add` enough? I'm sorry I can only code using hooks. I have only used `forceUpdate` using hooks. – blue sky Apr 09 '21 at 18:24

Nicholas Gentile · Accepted Answer · 2021-04-09T18:26:45.967

0

Firstly, you are setting the EDITABLE_FINANCIALS values on to state but you are not rendering them from state, you are rendering the raw EDITABLE_FINANCIALS.

Try this.state.values.map(...) instead of mapping EDITABLE_FINANCIALS.

Secondly, in your handler changeFalse, you are setting values to be an object.

What you want to do instead is something like this:

 toggleAdd(index) {
    this.setState((prevState) => {
    const newValues = [...values]
     newValues[index].add = !newValues[index].add

     return { values: newValues }
    });
  }

edited Apr 09 '21 at 18:26

answered Apr 09 '21 at 18:18

Nicholas Gentile

1,512
1
9
16

1

For my understanding, did I need to set values as an array instead of an object? – Apr 09 '21 at 18:39
@user12414630 yes, exactly. – Nicholas Gentile Apr 09 '21 at 19:26

Array element not updating to the opposite of its previous state

2 Answers2