Using React as library, I have several blocks of input text, each one with maxlength=1, and I would like to implement a function that everytime a character is entered in an input box the focus goes to the next one.

This is the list of input elements I'm talking about:

[![enter image description here](https://i.stack.imgur.com/p9obc.png)](https://i.stack.imgur.com/p9obc.png)

And this is a minimal representation on CodesSandbox: <https://codesandbox.io/s/react-autotab-6kewb>.

How can I get the desired behaviour in React?

This is the relevant snippet:

```
const autoTab = e => {
  const BACKSPACE_KEY = 8;
  const DELETE_KEY = 46;

  if (e.keyCode === BACKSPACE_KEY) {
    // TODO: implement backwards autoTab
  } else if (e.keyCode !== DELETE_KEY) {
    // TODO: implement forwards autoTab
  }
};

const blocks = Array.from({ length: 10 }, (element, index) => (
  <input className="block" key={index} maxLength={1} onKeyUp={autoTab} />
));

```