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

--

--

Founder and CEO of Abipravi. Reactjs expert and Django developer. Intrested in artifical intellegence and Web development. Blogging and Teaching in youtube🔥🔥

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abipravi

Founder and CEO of Abipravi. Reactjs expert and Django developer. Intrested in artifical intellegence and Web development. Blogging and Teaching in youtube🔥🔥