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.".
- If the ref callback is called with null, the callback will be doing
this.textInput = null;.
- From that moment on, if a user clicks the second input (the button), the
focusTextInput method will do this.textInput.focus();.
- But since
this.textInput is null, it's really doing this.null.focus();.
- 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:
with this:
this.textInput && this.textInput.focus();
or something like this.
This was found in the docs for React v16.0.0
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.".
this.textInput = null;.focusTextInputmethod will dothis.textInput.focus();.this.textInputis null, it's really doingthis.null.focus();.focusis not a method ofnull, so this will throwI would suggest adding a little guard for this in the code snippet so that people can copy-paste without worry, replacing this:
with this:
or something like this.
This was found in the docs for React v16.0.0