reactjs: usestate with object, values not getting changed

I have

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

  var default_variables = {
                        a: randomNum(2,9),
                        b: randomNum(1,9),
                        c: randomNum(2,9)
                      }
  const [variables,setVariables] = useState(default_variables)

  function refreshVariables(){
    setVariables({ ...variables,
                  a: randomNum(2,9),
                  b: randomNum(1,9),
                  c: randomNum(2,9)
                })
  }

and

                <Button 
                  variant="contained" 
                  color="primary"
                  onClick= {refreshVariables}
                  >
                  Refresh
                </Button>
                <div>{variables.a},{variables.b},{variables.c}</div>

I can see the state in the chrome devtools keep changing when i refresh, but the components are not rerendering with the changed values



Read more here: https://stackoverflow.com/questions/67384041/reactjs-usestate-with-object-values-not-getting-changed

Content Attribution

This content was originally published by Santhosh at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: