title: How to get label values dynamically and adding the numbers together from different input with reactjs
body: <p>Created a Div and inside it I have <code>label</code> element  and <code>input</code> element, I want to get different label values in each <code>div</code>. How to re-use my <code>div</code> component 
  instead of coding the same code again. </p>
  
  <p>I have tried to search in Stackoverflow plus googles, Haven't received a better answer.</p>
  
  <p>Here I have created div element with just label and input element and then I have rendured this component in <code>App.js</code> file:
  How can I reuse the same code/component to create 2 more div and having different labels values in it? Ho can I add numbers together from different input ( which I am getting from different components input)
  Appreciate all your help!</p>
  
  <pre><code>
  import React, { Component } from 'react';
  import './calculator.css';
  
  class Boxes extends Component {
  
      state = {
          inputOne: '',
          inputtwo: '',
          inputthree: ''
      }
  
  
      getInputValue = (e) =&gt; {
          const value = e.target.value;
          console.log('value: ', value);
          this.setState({
              inputOne: Number(e.target.value)
          });  
  
      }
  
      render() { 
          const { value } = this.props // destructuring
          const {inputOne, inputtwo, inputthree } = this.state
  
          return (
                  &lt;div className="boxes"&gt;
                      &lt;label className="boxeslevel" htmlFor="text"&gt;
                         {value}
                      &lt;/label&gt;
                      &lt;input 
                      name="text" 
                      type="text" 
                      onChange={this.getInputValue}
                      /&gt;                    
                  &lt;/div&gt;
  
            );
      }
  }
  
  export default Boxes;
  
  </code></pre>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import Boxes from './components/calculator';
  
  
  class App extends Component {
    render(){
      return (
        &lt;div className="wrapper"&gt;
            &lt;Boxes  value= {"Value 1:"} onChange={this.props.onChange}/&gt;
            &lt;Boxes  value= {"Value 2:"} onChange={this.props.onChange}/&gt;
            &lt;Boxes  value= {"Value 3:"} onChange={this.props.onChange}/&gt;
            &lt;ShowResult /&gt;
        &lt;/div&gt;
      );
    }
    }
  
  
  export default App;
  
  </code></pre>