Today I Learned

hashrocket A Hashrocket project

Auto-focus input field in #reactjs after render

If you have a react input field that you want to focus as soon as it is rendered use the autoFocus (case sensitive) attribute:

render() {
  if (this.showPreview) {
    return <div>{this.preview()}</div>;
  } else {
    return <textarea autofocus />;
  }
}

When the condition in the above example becomes falsey the textarea will be rendered and focused.

See More #react TILs
Looking for help? At Hashrocket, our JavaScript experts launch scalable, performant apps on the Web, Android and iOS. Contact us and find out how we can help you.