Focus on next input field in react while using map to display a jsx field

user_16041078 0
Viewed 48

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

use-ref react-hooks reactjs javascript
1 Answers

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

user_118879020
Related