How can I set autofocus on an input that react is rendering

Question

When I set the autofocus attribute on an input I'm returning from a react class the following error is generated:

 error TS2339: Property 'autofocus' does not exist on type 'HTMLAttributes'

This is the offending code:

return <input type="text" onChange={this.handleChange} value={this.state.text} autofocus/>;

I've tried the more verbose autofocus="autofocus" with no luck.

Can this be done using react and html? I could set it with javascript but I'd rather a html solution if one exists.

(Edit) As pointed out by Dominic Tobias, autoFocus (case sensitive) on its own does the trick, if you try to set the property like this autoFocus="autofocus" you will get the error:

TS2322  Type 'string' is not assignable to type 'boolean'.

I'm not familiar with reactjs, but shouldn't you use quotes around the onchange and value like this value="this.state.text"? Maybe the browser sees autofocus as part of your value. — Ivar
– Ivar, Commented Oct 29, 2015 at 13:03

nanobar · Accepted Answer · 2020-02-16 10:36:05Z

10

React camel-cases attributes. Use:

 <input type="text" onChange={this.handleChange} value={this.state.text} autoFocus />

edited Feb 16, 2020 at 10:36

answered Oct 29, 2015 at 13:00

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I set autofocus on an input that react is rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related