0

So I am making kind of like a hangman type of app where I scramble a sentence and a user has to guess the sentence. There are multiple input fields that is restricted to one letter. I want to make it possible so when the user types a letter the input would change to the next input field and so on until the last input field. If anyone can steer me in the right direction it would be greatly appreciated.

const InputGrid = ({sentence, key}) =>{
    const [userInput, setUserInput] = useState('');
    const [word, setWord] = useState('');
    const [letters, setLetters] = useState([]);
    console.log(userInput);

    useEffect(() =>{
        // let word = sentence.split(' ');
        setWord(sentence);
        setLetters(word.split(''));
    }, [sentence, word]);


    const handleChange = (event) =>{
        setUserInput(event.currentTarget.value)
    }

    const successInput = {
        background: 'green'
    }

    return(
        <div>
            {letters.map(letter =>{
                return (<input
                    maxLength="1" 
                    type="text" 
                    key={key} 
                    className="grid"
                    onChange={handleChange} 
                />);
            })}
        </div>
    )
};

export default InputGrid;

1 Answers1

0

You could store the inputs as refs and then focus the next one if a user types a character

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>
    )

// ...

Take a look in the documentation of React refs for further explanation on how refs work. Answer of multiple refs: https://stackoverflow.com/a/56063129/9852454

Casper Kuethe
  • 1,070
  • 8
  • 13
  • Thank you so much! I would like the answer if I could but can't at the moment, unfortunately. –  Jan 23 '22 at 22:45
  • No problem! You can accept the answer by clicking on the check mark beside the answer to toggle it from greyed out to filled in. So others know this answer is correct. – Casper Kuethe Jan 23 '22 at 23:02
  • Ok thanks for that! also how can I track the backspace keyboard key to delete the previous input? –  Jan 24 '22 at 07:19