title: Grab option value of second dropdown on change of first dropdown - React
body: <p>I am building a currency converter with react. The dropdowns are structured so that the exchange rate is included as an option 'value' and the name of the currency is the option.</p>
  
  <pre><code>e.g. 
  
  &lt;select&gt;
     &lt;option value="1.1934"&gt;US Dollar&lt;/option&gt;
     &lt;option value="130.44"&gt;Yen&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>There are two dropdowns, one on the left and one on the right. I am trying to work out how to obtain the current option value (i.e. the exchange rate) of BOTH of the dropdowns, when EITHER one is changed. This is in order to start the currency calculation by dividing one by the other.</p>
  
  <p>So far this is taking place on the handleChange event. I would be up for any ideas as to how to modify this in order to get the values from both dropdowns? (I have thought about using refs).</p>
  
  <pre><code>import React, { Component } from 'react';
  import "../../App.css"
  import cc from 'currency-codes'
  
  class Countries extends Component {
      constructor() {
          super();
          this.state = {
              countryCodes: [],
              left: '1.198',
              right: '1.198',
              leftinput: '',
              rightinput: '',
              rightmultiply: '',
              lefttext: ''
          };
  
  
      }
  
  componentDidMount(){
  
      fetch('http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml')
          .then(response =&gt; response.text())
          .then(str =&gt; (new window.DOMParser()).parseFromString(str, "text/xml"))
          .then(data =&gt; {
              const countryCodes = []; // define an empty array
              const cubes = data.getElementsByTagName("Cube")
              for( const element of cubes) {
                  if (!element.getAttribute('currency')) {
                      continue;
                  }
                  countryCodes.push({
                      currency: element.getAttribute('currency'),
                      rate: element.getAttribute('rate')
                  });
                  this.setState({countryCodes});   
  
              }
          });       
      }
  
  convertCurrCode(curr){
      const codeObject = cc.code(curr)
      const currName = codeObject['currency']
      return currName
  }
  
  handleChange(column, value, textname, text) {
      this.setState({[column]: value, [textname]: text}, () =&gt; {
          console.log('left: ', this.state.left, 'lefttext: ', this.state.lefttext);
          console.log('right: ', this.state.right);
          console.log('leftinput: ', this.state.leftinput);
          console.log('rightinput: ', this.state.rightinput);
          console.log('rightmultiply: ', this.state.leftinput * this.state.right/this.state.left)
      });
  }    
  
      render() {       
  
          const options = this.state.countryCodes.map(
              ({currency, rate}) =&gt; (&lt;option value={rate}&gt;{this.convertCurrCode(currency)}&lt;/option&gt;));
          return (
  
              &lt;div&gt;                
                  &lt;div className="App-column-left"&gt;
                      &lt;p&gt;{this.state.left} USD = {this.state.right} EUR&lt;/p&gt;
                      &lt;select ref="App-column-left-select" onChange={e =&gt; this.handleChange('left', e.target.value, e.target.selectedOptions[0].text)}&gt;
                          {options}
                      &lt;/select&gt;
                      &lt;input type="text" placeholder={this.state.rightinput * this.state.left/this.state.right} onChange={e =&gt; this.handleChange('leftinput', e.target.value)}&gt;&lt;/input&gt;
                  &lt;/div&gt;
  
                  &lt;div className="App-column-right"&gt;
                      &lt;p&gt;{this.state.right} USD = {this.state.left} EUR&lt;/p&gt;
                      &lt;select ref="App-column-right-select" onChange={e =&gt; this.handleChange('right', e.target.value)}&gt;
                          {options}
                      &lt;/select&gt;
                      &lt;input type="text" placeholder={this.state.leftinput * this.state.right/this.state.left} onChange={e =&gt; this.handleChange('rightinput', e.target.value)}&gt;&lt;/input&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  
  export default Countries;
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Robert</p>
  
  <p>London, UK</p>