Today I Learned

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.

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.