title: How to update state using setState based on another state after rendering?
body: <p>I'm trying to update states based on other states after rendering the jsx.<br></p>
  
  <p>Some of the states are updated but some of them are not updated.<br>
  Please consider checking 'ComponentDidMount()'. I'm not sure what is going on!<br>
  <strong>Why are they not getting updated accordingly?</strong><br>
  I'm confused!</p>
  
  <pre><code>import React, { Component } from "react";
  
  export class MathQuiz extends Component {
    constructor(props) {
      super(props);
      this.state = {
        num1: 0,
        num2: 0,
        op_type: "",
        op: "",
        result: 0,
        no_right: 0,
        no_wrong: 0,
        options: &lt;li /&gt;,
        ans_pos: 0,
        options_and_pos: [[], 0]
      };
    }
  
    componentDidMount() {
      this.genNums();
      this.initQuiz(this.props.location.state.op_type);
    }
  
    initQuiz(op_type) {
      this.setState({ op_type: op_type });
      if (op_type === "Addition") {
        this.setState({ op: "+" });
        this.setState(prevState =&gt; ({ result: prevState.num1 + prevState.num2 }));
      } /* Code */
      } else if (op_type === "Multiplication") {
        this.setState({ op: "x" });
        this.setState(prevState =&gt; ({ result: prevState.num1 * prevState.num2 }));
      console.log(this.state.result);
      this.setState({ options_and_pos: this.getOptions(this.state.result) });
      this.setState({
        options: this.state.options_and_pos[0].map((ele, i) =&gt; (
          &lt;li key={i}&gt;{ele}&lt;/li&gt;
        ))
      });
      this.setState({ ans_pos: this.state.options_and_pos[1] });
    }
    genNums() {
      this.setState({
        num1: this.genRandRange(1, 100),
        num2: this.genRandRange(1, 100)
      });
    }
    getOptions(ans) {
      /* Code */
      return [ans_options, rand_pos];
    }
    render() {
      return (
        &lt;div className="math_quiz_box"&gt;
          /* JSX Code */
        &lt;/div&gt;
      );
    }
  }
  </code></pre>