Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

ReactJS

July 27, 2023

How to Focus the Next Input with React

React Enter to Next Focus

export function App(props) {
  const firstNameRef = useRef(null)
  const lastNameRef = useRef(null)

// Let’s create a function which will help us to control focus in input  
const changeInputFocus = (event, nextInputRef) => {
    event.preventDefault()

// We can use key name on which we need to perform logic
    if (event.key === 'Tab' || event.key === 'Enter') {
      nextInputRef.current.focus();
    }
  };

  return (
    <div className='App'>
        <label>First name </label>
        <input 
          ref={firstNameRef} 
          type='text' 
          onKeyDown={(event) => changeInputFocus(event, lastNameRef)} />
        <label>Last name </label>
        <input ref={lastNameRef} type='text' />
      </div >
  );
}