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

Abipravi
1 min readJun 2, 2021

--

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

--

--

Abipravi
Abipravi

Written by Abipravi

0 Followers

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