score:0

Accepted answer
import { useRef } from 'react'

// ...
const inputs = useRef([]);

const handleChange = (event, index) =>{
        // Check if the current input is not the last
        if (index +1 != inputs.current.length) {
            let input = inputs.current[index+1];
            // Focus the next input
            input.focus();
        }
        // Example handle change for your use case
        // Adding the new character to your current input
        setUserInput(userInput + event.currentTarget.value);
    }

return(
        <div>
            {letters.map((letter, index) =>{
                return (<input
                    maxLength="1" 
                    type="text" 
                    key={key} 
                    className="grid"
                    { /* Pass index to onChange event */ }
                    onChange={(event) => handleChange(event, index)}
                    ref={el => inputs.current[index] = el}
                />);
            })}
        </div>
    )

// ...

Related Query

More Query from same tag