How to set focus to next input on entering key press in use ref hook in the material UI text field

Create an array of refs

export default function App() {
  const [data] = useState([Data]);
  const inputRefs = useRef([]); 
  const handleKeyPress = index => () => {                 
    const nextIndex = index + 1
    inputRefs.current[nextIndex].focus();                  
  };

  return (
    <div className="App">
      {data.map((data, index) => (
        <div key={index}>
          <TextField
            inputProps={{ onKeyPress: handleKeyPress(index) }}  
            inputRef={(ref) => (inputRefs.current[index] = ref)} 
          />
        </div>
      ))}
    </div>
  );
}

in the above code, you can see that we are adding ref value to the input Refs inside the map

inputRef = {ref => inputRefs.current[index] = ref}

Thank you for reading

Follow us on

Blogger:

Abipravi

Instagram:

https://www.instagram.com/praveenkumar_abipravi/

Linked In:

PRAVEEN KUMAR - Founder and CEO of Abipravi - Abipravi | LinkedIn

Twitter:

JavaScript is not available.