I am trying to make a Wordle clone how do i focus on the next input field after onChange have fired (After user have entered a word)

import {useRef} from 'react';

const Mainarea = () => {
 // will use useState later in this    
const boxes = [{color: "white" , id:1 , userInput : ""} ,{color: "white" , id:2 , userInput : ""} ,{color: "white" , id:3 , userInput : ""} ,{color: "white" , id:4 , userInput : ""} ,{color: "white" , id:5 , userInput : ""}];

    var value = "" 
    const inputRef = useRef("");

    return (

        <div className="Mainarea">
            <div className="mainBoxArea">
            
            // This is the map function in question 
        {boxes.map(box => {
                value  = value   box.userInput;
            return(
            <div className="div" key = {box.id}>
                <input ref = {inputRef} className = "boxview" maxLength={1} type="text"/>
            
            </div>
        )})}
            </div>
        </div>
     );
}
 
export default Mainarea;


----------

After user have added a word I want automatically focus on the next field as this map function will trigger 5 times

CodePudding user response：

First, you have an array of inputs so you need an array of refs, and on the handleChange function you can go to the next input by incrementing the index by one and using the focus event on the target input on that index.

import { useRef, useEffect } from "react";

const Mainarea = () => {
  // will use useState later in this
  const boxes = [
    { color: "white", id: 1, userInput: "" },
    { color: "white", id: 2, userInput: "" },
    { color: "white", id: 3, userInput: "" },
    { color: "white", id: 4, userInput: "" },
    { color: "white", id: 5, userInput: "" }
  ];

  var value = "";
  const inputRefs = useRef([]);

  useEffect(() => {
    inputRefs.current = inputRefs.current.slice(0, boxes.length);
  }, []);

  const handleChange = (i) => {
    if (i === boxes.length - 1) {
      return;
    }
    inputRefs.current[i   1].focus();
  };



  return (
    <div className="Mainarea">
      <div className="mainBoxArea">
        {boxes.map((box, i) => {
          value = value   box.userInput;
          return (
            <div className="div" key={box.id}>
              <input
                ref={(el) => (inputRefs.current[i] = el)}
                className="boxview"
                maxLength={1}
                type="text"
                onChange={() => handleChange(i)}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Mainarea;

And this is working codesandbox example