Assign value to State object key of another key's value in React js

Question

I am trying to check whether sum of three numbers is equal if yes then i want to update the state.

state = {
    number1 : Math.floor(Math.random() * 100),
    number2 : Math.floor(Math.random() * 100),
    number3 : Math.floor(Math.random() * 100),
    proposedAnswer : Math.floor(Math.random() * 3) + this.number1 + this.number2 + this.number3
}

But when i try to use {this.state.proposedAnswer} i will get NAN ? Any help please ?

Answer 1

You can't refer to a property of an object before initializing it... perhaps something like this would work in your case?

 let number1 = Math.floor(Math.random() * 100); let number2 = Math.floor(Math.random() * 100); let number3 = Math.floor(Math.random() * 100); this.state = { number1, number2, number3, proposedAnswer : Math.floor(Math.random() * 3) + number1 + number2 + number3 } console.log(this.state); 

Answer 2

What you are doing wrong is that you that not accessing those variables by state. Instead you should do this:

state = {
    number1 : Math.floor(Math.random() * 100),
    number2 : Math.floor(Math.random() * 100),
    number3 : Math.floor(Math.random() * 100),
    proposedAnswer : ''
}

Since the state is initialized, now we can define a function to calculate the sum.

sum = () => {
  this.setState ({
    proposedAnswer:  Math.floor(Math.random() * 3) + this.state.number1 + this.state.number2 + this.state.number3
  )}
}

Answer 3

The this in your code does not refer to anything, so you are summing undefined to a number and then get NaN .

You could use the callback version of setState in which you pass a function which takes a state and return a new state. Inside a PureComponent you can write this function so that if some test is true you return the old state.

this.setState((state) => {
  const number1 = Math.floor(Math.random() * 100);
  const number2 = Math.floor(Math.random() * 100);
  const number3 = Math.floor(Math.random() * 100);
  const proposedAnswer : Math.floor(Math.random() * 3) + number1 + number2 + number3

  if (proposedAnswer ...) {
    // return a new state
  }
  // in the default case you return the old state unchanged
  return state;
})

Note that I would not recommend this pattern as your update function is not a pure function . If you can add any detail as to your current use case maybe I can elaborate on which pattern could be desirable.

Answer 4

You should update your state inside setState method. Here is a sample-

state = {
    number1 : Math.floor(Math.random() * 100),
    number2 : Math.floor(Math.random() * 100),
    number3 : Math.floor(Math.random() * 100),
    proposedAnswer: ''
}

calculateSum = () => {
  this.setState ({
    proposedAnswer:  Math.floor(Math.random() * 3) + this.state.number1 + this.state.number2 + this.state.number3
 )}
 console.log(state);
}

You can call the calculateSum method inside your render method for any input text or div. Let me know if this helps.