Jun 2, 2021
1 min read
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}
