I am trying to select all the text in a textarea when a ponent loads using React v16.3.1

Following the Refs docs I have a basic sample but this.textarea is always undefined, if I change this sample to execute the same code on a button click it works fine.

So whats going on? I had expected that after mounting the ponent should be available?

Sample code:

import React from "react";

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.textarea = React.createRef();
  }

  ponentDidMount = () => {
    this.textarea.current.select();
  };

  render() {
    return (
      <div>
        <textarea
          className="form-control"
          defaultValue="the quick brown fox."
          ref={this.textarea}
        />
      </div>
    );
  }
}

From package.json:

"react": "^16.3.1",
"react-dom": "^16.3.1",

Thanks

I am trying to select all the text in a textarea when a ponent loads using React v16.3.1

Following the Refs docs I have a basic sample but this.textarea is always undefined, if I change this sample to execute the same code on a button click it works fine.

So whats going on? I had expected that after mounting the ponent should be available?

Sample code:

import React from "react";

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.textarea = React.createRef();
  }

  ponentDidMount = () => {
    this.textarea.current.select();
  };

  render() {
    return (
      <div>
        <textarea
          className="form-control"
          defaultValue="the quick brown fox."
          ref={this.textarea}
        />
      </div>
    );
  }
}

From package.json:

"react": "^16.3.1",
"react-dom": "^16.3.1",

Thanks

• javascript
• reactjs

• It's working correctly for me, are you sure you have the correct version of react? – Axnyff Commented Apr 15, 2018 at 7:34
• What if you change arrow function? ponentDidMount() { this.textarea.current.select(); }; – Tomasz Mularczyk Commented Apr 15, 2018 at 7:37
• @Axnyff yup, 16.3.1 is the version installed... – shenku Commented Apr 15, 2018 at 9:23
• @TomaszMularczyk no change – shenku Commented Apr 15, 2018 at 9:30
• @shenku I have the same issue, did you find out what was wrong? I'm using 16.8.2 – HRK44 Commented Feb 18, 2019 at 13:21

2 Answers 2

The documentation says:

Note

The examples below have been updated to use the React.createRef() API introduced in React 16.3. If you are using an earlier release of React, we remend using callback refs instead.

If you are using an earlier release of React, u need use callback refs

class App extends React.Component {
  constructor(props) {
    super(props);
    this.textarea = null;

    this.setTextareaRef = element => {
      this.textarea = element;
    };
  }

  ponentDidMount = () => {
    if (this.textarea) this.textarea.select();
  };

  render() {
    return (
      <div>
        <textarea
          className="form-control"
          defaultValue="the quick brown fox."
          ref={this.setTextareaRef}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Using React 16.3

class App extends React.Component {
  constructor(props) {
    super(props);
    this.textarea = React.createRef();
  }

  ponentDidMount = () => {
    this.textarea.current.select();
  };

  render() {
    return (
      <div>
        <textarea
          className="form-control"
          defaultValue="the quick brown fox."
          ref={this.textarea}
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://unpkg./[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg./[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>

For someone experiencing the same issue make sure that there's not another error somewhere in the stack that is causing a parent ponent to catch, for example.

class MyComponent extends React.Component {
  private myRef = React.createRef();
  constructor(props) {
    super(props);
  }
  ponentDidMount() {
    console.log(this.myRef.current);
  }
  render() {
    return (<div ref={this.myRef} />);
  }
}

You may think that this.myRef will always be defined in this case but as it stands say you are using it like this

<SomeNewComponent>
  <MyComponent />
</SomeNewComponent>

And some new ponent has an error of some sort during mounting... specially if it handles ponentDidCatch and ponentDidMount it will then make MyComponent's div never truly render.

It is odd that ponentDidMount would be firing, but apparently it does; it's easy to overlook the stacktrace because all you see is the error from the myRef being null while the other one is way above in the console.