title: JSX React: select all contents in text box using ref
body: <p>Here's what I currently have.</p>
  <pre><code>class App extends React.Component {
      constructor(props) {
        super(props)
        
        this.textInput = React.createRef();
        this.state = {
          value: 'select all on click'
        }
      }
    
    handleClick = e =&gt; {
      e.preventDefault();
      this.setState({ value: this.textInput.current.select()})
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;input type=&quot;text&quot; ref={this.textInput}
            value={this.state.value}
            onClick={this.handleClick}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>
  <p>This works, but in my browser I keep getting this error in handleClick:
  <code> Cannot read property 'current' of undefined.</code> This is because I'm using some <code>&lt;Child&gt;</code> component in place of <code>&lt;input&gt;</code> in my local environment. I've tried renaming the ref to match the parent prop as suggested here <a href="https://stackoverflow.com/a/53241934/6312629">https://stackoverflow.com/a/53241934/6312629</a>, but that also didn't work.</p>
  <p>Any suggestions as to how to resolve this would be greatly appreciated!</p>
  <p>Thank you very much!</p>