title: React-bootstrap ToggleButtonGroup uses old value when calling
body: <p>I have a form using ToggleButtonGroup from <code>react-bootstrap</code>. I need to change some text values in the form based on the value selected in the toggle. The problem is that when calling <code>onChange</code> on the button - I got the previously selected value of the toggle, not the new one.</p>
  
  <pre><code>constructor(props) {
      super(props);  
      this.tradeInput = React.createRef();
  }
  
  handleChange() {
      console.log(this.tradeInput.current.props.value); // old value printed here
  }
  
  &lt;ToggleButtonGroup type="radio" name="trade" defaultValue="BUY" ref={this.tradeInput} onChange={e =&gt; this.handleChange(e)}&gt;
      &lt;ToggleButton value="BUY"&gt;BUY&lt;/ToggleButton&gt;
      &lt;ToggleButton value="SELL"&gt;SELL&lt;/ToggleButton&gt;
  &lt;/ToggleButtonGroup&gt;
  </code></pre>
  
  <p>Could someone suggest how to fix this?</p>
  
  <p>EDIT: Very strange thing is happening when I try to read the value in my reference:</p>
  
  <p><code>console.log(this.tradeInput.current)</code> shows the correct updated value in the <code>current.props.value</code> but if I try to print <code>console.log(this.tradeInput.current.props.value)</code> with the exact same input, it gives me different result (the old value).</p>
  
  <p>EDIT2: Full updated code</p>
  
  <pre><code>class ResourceTradePanel extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = { 
              validated: false,
              caps: 0,
              junk: 0,
              food: 0,
              trade: "BUY"
          };
  
          this.handleJunkChange.bind(this);
          this.handleFoodChange.bind(this);
          this.handleTradeChange.bind(this);
          this.updateCaps.bind(this);
          this.handleSubmit.bind(this);
      }
  
      handleSubmit(event) {
        ...
      }
  
      handleJunkChange(event) {
          this.setState({ 
              junk: event.target.value
          });
          this.updateCaps();
      }
  
      handleFoodChange(event) {
          this.setState({ 
              food: event.target.value
          });
          this.updateCaps();
      }
  
      handleTradeChange(event) {
          this.setState({ 
              trade: event.target
          });
          this.updateCaps();
      }
  
      updateCaps() {
          var capsInfo = 0;
          const junk = parseInt(this.state.junk);
          const food = parseInt(this.state.food);
          if (this.state.trade === "BUY") {
              capsInfo = (junk + food) * 2;
          } else if (this.state.trade === "SELL") {
              capsInfo = junk + food;
          };
  
          this.setState({ 
              caps: capsInfo
          });
      }
  
      render() {
          return &lt;Card&gt;
              &lt;Card.Body&gt;
                  ...
                  &lt;Form 
                      id="resourceForm"
                      noValidate
                      validated={this.state.validated}
                      onSubmit={e =&gt; this.handleSubmit(e)}
                  &gt;
                              &lt;InputGroup className="mb-3"&gt;
                                  &lt;FormControl
                                      name="junk"
                                      type="number"
                                      min={0}
                                      max={10}
                                      value={this.state.junk}
                                      onChange={e =&gt; this.handleJunkChange(e)}
                                  /&gt;
                                  &lt;Form.Control.Feedback type="invalid"&gt;
                                      &lt;Translate id="labels.resourceLimitExceeded" /&gt;
                                  &lt;/Form.Control.Feedback&gt;
                              &lt;/InputGroup&gt;
                              &lt;InputGroup className="mb-3"&gt;
                                  &lt;FormControl
                                      name="food"
                                      ref={this.foodInput}
                                      type="number"
                                      min={0}
                                      max={10}
                                      value={this.state.food}
                                      onChange={e =&gt; this.handleFoodChange(e)}
                                  /&gt;
                                  &lt;Form.Control.Feedback type="invalid"&gt;
                                      &lt;Translate id="labels.resourceLimitExceeded" /&gt;
                                  &lt;/Form.Control.Feedback&gt;
                              &lt;/InputGroup&gt;
                              &lt;InputGroup&gt;
                                  &lt;FormControl
                                      type="number"
                                      disabled
                                      value={this.state.caps}
                                  /&gt;
                              &lt;/InputGroup&gt;
                              &lt;ToggleButtonGroup type="radio" name="trade" defaultValue={this.state.trade} onChange={e =&gt; this.handleTradeChange(e)}&gt;
                                  &lt;ToggleButton variant="outline-dark" value="BUY"&gt;&lt;Translate id="labels.buy" /&gt;&lt;/ToggleButton&gt;
                                  &lt;ToggleButton variant="outline-dark" value="SELL"&gt;&lt;Translate id="labels.sell" /&gt;&lt;/ToggleButton&gt;
                              &lt;/ToggleButtonGroup&gt;
                  &lt;/Form&gt;
              &lt;/Card.Body&gt;
          &lt;/Card&gt;
      }
  };
  </code></pre>