title: Correctly destructuring this.props for the whole component
body: <p>I came across an issue today, consider following component:</p>
  
  <pre><code>export default class Input extends React.Component {
    someFunction() {
      console.log(this.props.value)
    }
  
    render () {
      const { type, value, required } = this.props
      return (
        &lt;div className={cx('Input')}&gt;
          &lt;input type={type} value={value} required={required} /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>I am successfully destrucutring <code>this.props</code> and can use them within the render, however what if I need to use prop values outside of it i.e. inside <code>someFunction()</code> I am not sure to what would the consequences be if I move out <code>constant { ... }</code> and include right after <code>export default class Input extends React.Component {</code> line. Will this still be valid?</p>