score:3

Accepted answer

you may want to try this

<input value={email} autofocus={this.props.email} name="username"> 

score:1

you could just use autofocus:

<input value={email} name="username" autofocus={!!this.props.email} >             
<input name="password" autofocus={!this.props.email} />

or, with refs:

if(this.props.email){
    // would like to set autofocus for  <input value={email} name="username">  
    this.emailinput.focus()  
}else{
    // would like to set autofocus for  <input name="password" />
    this.passwordinput.focus()
}

 <input value={email} name="username" ref={input => {this.emailinput = input}}>             
 <input name="password" ref={input => {this.passwordinput = input}} />

score:1

checkout this sandbox

this doesn't use if-else, but uses this.props.email, as in your question:

how to autofocus for input name based on whether this.props.email exists or not?


inside input.js (component)

<input
  value={this.props.email}
  name="username"
  autofocus={this.props.email}
/>
<input name="password" autofocus={!this.props.email} />

inside index.js (parent)

<input email={""} />

Related Query

More Query from same tag