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