CODEWITHSUNDEEP
htmlreactjsautofocus
Des Horsley
Des Horsley

Reputation: 1888

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

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'.

Upvotes: 3

Views: 2949

Answers (1)

nanobar
nanobar

Reputation: 66345

React camel-cases attributes. Use:

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

Upvotes: 10

Related Questions