Trouble with this.setState

Question

I have a grid of buttons with options that I want to be able to select. At first, all values are set at false. But there's a problem, every time I press a button for the first time, the value is still false, the second time it's false again (which is ok) and the third time is where the button is now set to true. I want to be able to set the value at true on the first ever time the button is pressed.

const {
    // This value is 'false' at first
    isArtAndCulture
} = stateController;

const [isAaC, setIsArtAndCulture] = useState(false);

...

<Block style={{ flex: 0.85, marginRight: 5 }}>
  <TouchableOpacity
    style={{
      height: 44,
      borderRadius: 5,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: isAaC ? theme.colors.EventSection : theme.colors.Grey
    }}
    onPress={() => {
      setIsArtAndCulture(!isAaC);
      // Supposedly the value must be 'true' now, but when I print the 'isArtAndCulture' value,
      // it stays 'false' until the third button press.
      saveInState({ isArtAndCulture: isAaC });
      console.log(isArtAndCulture);
    }}
  >
    <Text
      profile
      text="Arte y Cultura"
      style={{
        fontFamily: theme.fonts.Bold,
        color: isAaC ? theme.colors.White : theme.colors.Black
      }}
    />
  </TouchableOpacity>
</Block>

saveInState = state => {
  this.setState(state);
}

Hey man, `this.setState` is used in class components and it looks like you're using functional components. Will need more code to see what you're trying to do exactly. — LonelyCpp, May 12 '20 at 04:00
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Emile Bergeron, May 12 '20 at 04:09
If it doesn't answer your question, we'll definitely need an [mcve] as the code shown right now is not enough (not even valid). — Emile Bergeron, May 12 '20 at 04:11

Vivek Doshi · Answer 1 · 2020-05-12T04:23:25.810

As you are using

const [isAaC, setIsArtAndCulture] = useState(false);

You can change the state of isAaC via setIsArtAndCulture,

and if you are using useState, that means you are using the functional component so you can't use this. , you can use this.setState inside class component only

Change this :

saveInState = state => {
  this.setState(state);
}

To :

saveInState = (val) => {
   setIsArtAndCulture(val)
}

Do run the code snippet, Hope that will clear your doubts :

const { useState } = React;

const App = () => {

  const [isAaC, setIsArtAndCulture] = useState(false);

  const saveInState = (val) => {
    setIsArtAndCulture(val);
  }

  return (
    <div>
      Current Val :  {isAaC ? "True" : "False"}
      <br/>
      <button onClick={() => saveInState(true)}>Make True</button>
      <button onClick={() => saveInState(false)}>Make False</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

score 0 · Answer 2 · answered May 12 '20 at 04:13

0

Use the previous state instead of directly inverting the variable isAaC like this:

      setIsArtAndCulture((prevState) => !prevState);

answered May 12 '20 at 04:13

Bassem

3,582
2
24
47

Trouble with this.setState

2 Answers2