title: Calculation in React based on input and back-end
body: <p>I am learning to react and trying to create an application that counts based on back-end and input.  </p>
  
  <p>Desription:</p>
  
  <p>The user selects:</p>
  
  <p>A. Country</p>
  
  <p>B. Enters the value of myValue</p>
  
  <p>The application in the Country field displays an array from the back-end, which looks like this:
  [{"country": "France", "perentage1": 10.0, "percentage2": 10.0, "percentage3": 7.5}]</p>
  
  <p>The application should get input from the user, I was able to do more or less. Changing handleChangeCountry value works. MyValue is also displayed on the console, the application reads it</p>
  
  <p>I would like the application, after selecting the country by the user and entering the value, calculate the percentages from this value that are in the array in the back-end. There will be more countries in the future and each of them will have different percentages.
  <a href="https://i.stack.imgur.com/cKYmB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cKYmB.jpg" alt="enter image description here"></a></p>
  
  <p>That is, when the user enters France and the value 200, the application should count percentage1 = 10</p>
  
  <pre><code>class Calculator extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          country: [],
          selectedCountry: '',
          myValue: '',
          percentage1: [],
          percentage2: [],
          percentage3: [],
      };
      this.handleChangemyValue = this.handleChangemyValue.bind(this);
  }
  
  componentDidMount() {
      axios
          .get('URL')
          .then((response) =&gt; {
              console.log(response);
              console.log(this.Calculation);
  
              this.setState({
                  country: response.data
              });
          })
          .catch((error) =&gt; console.log(error.response));
  }
  handleChangeCountry = (event) =&gt; {
      this.setState({ selectedCountry: event.target.value });
      console.log(event.target.value);
  };
  
  
  handleChangemyValue(event) {
      this.setState({ mylValue: event.target.value });
  
      const myValue = event.target.value;
      console.log(myValue);
  }
  
  
  inputCountryHandler = (event) =&gt; {
      this.setState({
          input: {
              country: event.target.value
          }
      });
  };
  
  
  inputmyValueHandler = (event) =&gt; {
      this.setState({
          input: {
              mylValue: event.target.value
          }
      });
  };
  
  
  
  showDiv = () =&gt; {
      if ((document.getElementById('myDIV').style.visibility = 'hidden')) {
          document.getElementById('myDIV','myDIV2','myDIV3','myDIV4').style.visibility = 'visible';
          document.getElementById('btn-calculate').style.marginTop = '-100px';
      }
  };
  
  render() {
      //  const { country, category, currency } = this.state;
  
      return (
  
                  &lt;Form.Label&gt;Country&lt;/Form.Label&gt;
                  &lt;Form.Control
                      as="select"
                      className="User-Input"
                      placeholder=""
                      value={this.state.selectedCountry}
                      onChange={this.handleChangeCountry.bind(this)}
                  &gt;
                      &lt;option /&gt;
                      {this.state.country &amp;&amp;
                          this.state.country.length &gt; 0 &amp;&amp;
                          this.state.country.map((countryItem) =&gt; (
                              &lt;option key={countryItem.country}&gt;{countryItem.country}&lt;/option&gt;
                          ))}
                  &lt;/Form.Control&gt;
  
  
  
                          &lt;Form.Label&gt;My value&lt;/Form.Label&gt;
                          &lt;Form.Control
                              //  ref={(input) =&gt; (this.textInput = input)}
                              placeholder=""
                              className="User-Input"
                              value={this.state.pmylValue}
                              onChange={this.handleChangemyValue}
                              //onChange={this.handleChangemylValue}
                              //onSubmit={this.inputmyValueHandler}
                              type="number"
                          /&gt;
  
  
              &lt;div className="calculator-results"&gt;
                                  &lt;Row&gt;
                      &lt;Col xs={6} md={5} className="Column-Items results-div Lg" id="myDIV"&gt;
                          &lt;ul&gt;
                              &lt;ul&gt;
                                  &lt;b&gt;Percentage 1:&lt;/b&gt;
                              &lt;/ul&gt;
                              &lt;ul&gt;
                                  &lt;b&gt;Percentage 2:&lt;/b&gt;
                              &lt;/ul&gt;
                              &lt;ul&gt;
                                  &lt;b&gt;Percentage 3:&lt;/b&gt;
                              &lt;/ul&gt;
                          &lt;/ul&gt;
                      &lt;/Col&gt;
                      &lt;Col xs={6} md={5} className="Column-Items results-div Pg" id="myDIV3"&gt;
                          &lt;ul&gt;
  
                              &lt;ul type="number"&gt;{this.state.myValue}&lt;/ul&gt;
                              &lt;ul&gt; here percentage2 form mylValue&lt;/ul&gt;
                              &lt;ul&gt;here percentage3 form mylValue &lt;/ul&gt;
                          &lt;/ul&gt;
                      &lt;/Col&gt;
  
                      &lt;Col xs={12} className="second-part results-div"&gt;
                          &lt;hr className="results-div" /&gt;
                      &lt;/Col&gt;
  
                      &lt;Col xs={6} md={5} className="Column-Items-2 results-div" id="myDIV2"&gt;
                          &lt;ul className="Ld"&gt;
                              &lt;ul&gt;
                                  &lt;b&gt;
                                      &lt;font color="#27aae1"&gt;Total sum&lt;/font&gt;
                                  &lt;/b&gt;
                              &lt;/ul&gt;
                          &lt;/ul&gt;
                      &lt;/Col&gt;
                      &lt;Col xs={6} md={5} className="Column-Items-2 results-div" id="myDIV4"&gt;
                          &lt;ul className="Pd"&gt;
                              &lt;ul&gt;
                                  &lt;b&gt;
                                      &lt;font color="#27aae1"&gt;here total sum of percentage1+percentage2+percentage3&lt;/font&gt;
                                  &lt;/b&gt;
                              &lt;/ul&gt;
                          &lt;/ul&gt;
                      &lt;/Col&gt;
  
                      &lt;Button
                          onClick={this.showDiv}
                          className="calculate-btn"
                          variant="primary"
                          type="submit"
                          id="btn-calculate"
                      &gt;
                          &lt;label className="calculate-btn-label" for="calculate"&gt;
                              Calculate
                          &lt;/label&gt;
                      &lt;/Button&gt;
                  &lt;/Row&gt;
              &lt;/div&gt;
                  );
  }
  }
  
  export default Calculator;
  </code></pre>
  
  <p><strong>Thank you for any help!</strong></p>