Code snippet in docs unexpectedly throws

[shawninder]

Bug Report

The docs present an example code snippet which crashes the js process. See https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element

In particular, notice the highlighted parts of the code snippet and the first sentence under the snipppet, which reads "React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts.".

1. If the ref callback is called with null, the callback will be doing this.textInput = null;.
2. From that moment on, if a user clicks the second input (the button), the focusTextInput method will do this.textInput.focus();.
3. But since this.textInput is null, it's really doing this.null.focus();.
4. Yet focus is not a method of null, so this will throw

I would suggest adding a little guard for this in the code snippet so that people can copy-paste without worry, replacing this:

this.textInput.focus();

with this:

this.textInput && this.textInput.focus();

or something like this.

This was found in the docs for React v16.0.0

[Ethan-Arrowood]

I'd be happy to update the docs. You (or I) should open an issue on https://github.com/reactjs/reactjs.org instead.

[gaearon]

Yes, please file the website issues in that repo.

[shawninder]

This ended up as a new issue in another repo: reactjs/react.dev#173