title: How to make a percentage button work in react-native
body: <p><strong>Edit</strong></p>
  
  <p><strong>Was able to make it work, but now when I click Tax button it says that result is NaN. How do I fix it?</strong></p>
  
  <p>Have a small calculating app build in react-native. All buttons work except the Tax one. For the Tax button, I need it to add 12% to the result of either addition, subtraction, multiplication or division of two numbers. Can someone help me to understand what I'm doing wrong here? Tried looking online, but wasn't able to find the solution. Would be very glad if someone will point to the mistake.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
  
  export default class Counter extends React.Component {
  
  state = {
      num: 0,
  }
  
  inp1 = 0;
  inp2 = 0;
  
  handleSubtract = () =&gt; {
      this.setState({
          num:this.inp1-this.inp2
      })
  }
  
  handleAdd = () =&gt; {
      this.setState({
          num: this.inp1 + this.inp2
      })
  }
  
  handleDivide = () =&gt; {
      this.setState({
          num: this.inp1 / this.inp2
      })
  }
  
  handleMultiply = () =&gt; {
      this.setState({
          num: this.inp1 * this.inp2
      })
  }
  
  handleTax = () =&gt; {
  
      var newNum = this.num / 100 * 12;
  
      this.setState({
          num: newNum
      })
  }
  
  handleNum1 = (text) =&gt; {
      this.inp1 = parseInt(text);
  }
  
  handleNum2 = (text) =&gt; {
      this.inp2 = parseInt(text);
  }
  
  render() {
      return (
          &lt;View style={styles.flexBox}&gt;
              &lt;Text style={styles.flexTitle}&gt;Hi, welcome to my app!&lt;/Text&gt;
              &lt;View style={styles.inpBox}&gt;
                  &lt;TextInput
                      style={[styles.inps, {marginRight: 10}]}
                      placeholder="Num1"
                      keyboardType="phone-pad"
                      onChangeText={this.handleNum1}
                  /&gt;
                  &lt;TextInput
                      style={styles.inps}
                      placeholder="Num2"
                      keyboardType="phone-pad"
                      onChangeText={this.handleNum2}
                  /&gt;
              &lt;/View&gt;
              &lt;View style={styles.butBox}&gt;
                  &lt;View style={styles.button}&gt;
                      &lt;Button
                          onPress={this.handleSubtract}
                          title="Subtract"
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.button}&gt;
                      &lt;Button
                          onPress={this.handleAdd}
                          title="Add"
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.button}&gt;
                      &lt;Button
                          onPress={this.handleMultiply}
                          title="Multiply"
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.button}&gt;
                      &lt;Button
                          onPress={this.handleDivide}
                          title="Divide"
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style={[styles.button, {height: 65, width: 65}]}&gt;
                      &lt;Button
                          onPress={this.handleTax}
                          title="Tax"
                          color="#f00"
                  /&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
              &lt;Text style={styles.numBox}&gt;
                  {this.state.num}
              &lt;/Text&gt;
          &lt;/View&gt;
      );
  }
  }
  
  const styles = StyleSheet.create({
  flexBox: {
      flex: 1,
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
  },
  
  flexTitle: {
      padding: 10,
  },
  
  inpBox: {
      flexDirection: "row",
  },
  
  inps: {
      width: "20%",
      height: 50,
      textAlign: "center",
  },
  
  butBox: {
      flexDirection: "row",
      width: "100%",
      alignItems: "center",
  },
  
  button: {
      width: "20%",
      height: 50,
  },
  
  numBox: {
      padding: 20,
      fontSize: 32,
  }
  });</code></pre>
  </div>
  </div>
  </p>