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={""} />
Source: stackoverflow.com
Related Query
- autofocus in react based on condition if else
- React how to return a label message based on if else condition
- how to do condition based don't repeat yourself (dry) principle in React JS?
- React Js : Passing a condition to a state value based on another state value
- React styled-components - How to render styles based on prop condition or pseudo class?
- How to apply a CSS style in React based on condition and incorporate it with another class?
- React js : change css class based on condition
- Enable or Disable Form button in React based on condition
- React map function if else condition
- React Apollo Query based on a condition
- React Formik checkbox condition based value remove in other Fields
- Condition based routing in react
- How to display an element based on a condition using react and typescript?
- How can call multiple function in React ternary if else condition
- React formik select condition based another select
- Usage of Conditional statements in React to change the color of table row based on condition
- React js if else condition
- Break map() function in React JS based on condition
- How to use array objects based on condition using React JS
- Add CSS ClassName dynamically in React loop Based on Condition
- How to put condition IF ELSE inside .map in React JS
- How do i get the sum of object in arrays react js based on condition
- React custom Image Component doesn't render based on given condition
- How to display a particular text based on a condition in a reusable component using react and javascript?
- How do i highlight a row based on another row condition in react jsx?
- react JS import Files and use specific one based on Condition
- How to make a prop required based on condition typescript react
- trying to render fields on condition based inside FieldArray react JS
- How to enable/ disable react form based on condition
- Pass value from one function to another based on a condition in react js
More Query from same tag
- How to create a reusable input field using react?
- I'm aware of async nature of setState, but I still don't quite understand my problem here
- How to access the file system in react native?
- How to filter an array object in a reducer without affecting the actual state
- Material Design React Multiple Select Placeholder
- Direct DOM acces when working with React-Redux
- Images are not loading in browser with react, webpack and express
- How to push item in a list in Realtime Database with serial indexing like array?
- API...Pulling json.file data through with componentDidMount in React issues
- Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app
- React - Fetch from external API function on button click
- ReactJS: Maintain data state between parent and child
- The react-scripts package provided by Create React App requires a dependency : Babel-Jest
- Styling rendered iframe in react
- How to set default Route in React Router?
- reducer is not a function
- How to delete data from table in reactjs?
- why I get display next month instead of current month
- how to post data in react es6 with axios using actions
- ReactJS: how can I access parent element width from child component?
- How to access the nested object in react js
- How can you update a textarea's value dynamically while still being able to edit it - React
- How to Double Click Toggle visibility of React Component?
- How to filter list of objects that doesn't match some condition in another list of objects
- delete button to delete a movie card
- How to expand video box and center it on hover
- React final form - infinite submitting
- React-Select multivalue does not populate selected items like in example
- TS Lint Error; Type X is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'
- Use V8 instead of JavascriptCore for react-native