title: React - Passing State to child component
body: <p>My Parent Class which holds the overall App state</p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        inputValue: 1,
      };
  
      this.handleChange = this.handleChange.bind(this);
    };
  
    handleChange(event) {
      const target = event.target;
      const newValue = target.value;
  
     if( Math.sign(newValue) === 1 ) {
      this.setState({
        inputValue: newValue
      });
     }
  
    }
  
    render() {
      return (
        &lt;EngInput type="number" value={this.state.inputValue} onChange={this.handleChange}/&gt;
      );
    }
  }
  </code></pre>
  
  <p>My child component to which I am passing the state as props.</p>
  
  <pre><code>class EngInput extends React.Component {
  
    render() {
      return (
        &lt;input
          type="number"
          defaultValue={this.props.value}
          onChange={this.props.onChange}
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>The logic I am trying to implement being - The child input component should accept only positive numbers. If its a negative number, the state should not change and the UI should update to the inputValue instead of the newValue.</p>
  
  <p>But, whats happening in the above code is, even though the state does not change to non negative value, the UI still accepts negative value.</p>
  
  <p>How to implement a logic like, if the value is negative, the UI should still show the old positive value from state.</p>