title: Create price range fields (min and max) using reactJS
body: <p>after spending a lot time I need help here. </p>
  
  <p>I am creating a template. Where I can use different form fields. Everything is working. I am getting value form all fields as expected. </p>
  
  <p>But problem is when I have 2 input fields together in one component and pass this component to parent component and get the value. then save this value in object. </p>
  
  <p>I hope its clear enough. Thank you in advance</p>
  
  <hr>
  
  <pre><code>class Parent extends Component {
    handlePriceMinMax(event) {
      console.log(event.target.value);
  
      /* I cant set the right values here. 
      *  These values get overwritten with latest value. 
      *  Because I get value on keypress/onChange value */
      this.setState({
              priceRange: {
                  min: event.target.value, 
                  max: event.target.value
              }
          }
      );
    }
    render() {
      return (
        &lt;Child onChange={this.handlePriceMinMax}/&gt;
      )
    }
  }
  </code></pre>
  
  <hr>
  
  <pre><code>class Child extends Component {
    render() {
      return (
          &lt;div className="form-group"&gt;
              &lt;label&gt;Price&lt;/label&gt;
              &lt;input type="number" onChange={this.props.onChange}/&gt;
              &lt;input type="number" onChange={this.props.onChange}/&gt;
          &lt;/div&gt;
      );
    }
  }
  
  export default Child;
  </code></pre>