Render an array of refs

Question

I have to perform the following steps on an array:

Create an array of refs outside the component
create a form
inside the form make a map of the array and render an input for each element
the input (when in focus) at the press of "enter" puts the next input in focus if there is any, otherwise it submits the form

My code is the following:

const array = new Array(5).fill(createRef());


const Step1 = () => {
   
    return (
        <>
            {/*Form  */}
           
                {/*- inside the form make a map of the array and render an input for each element, - the input (when in focus) at the press of "enter" puts the next input in focus if there is any, otherwise it submits the form */}
                {array.map((item, index) => {
                    return (
                         {
                                if (e.key === "Enter") {
                                    if (array[index + 1]) {
                                        array[index + 1].current.focus();
                                    } else {
                                        e.preventDefault();
                                        console.log("submit");
                                    }
                                }
                            }}
                        />
                    );
                })}
                 
           
        
    )
}

export default Step1;

The last point doesn't work, how can I change the code to make it work? Solved

The only problem is that I can't write in the inputs. Solved

If I wanted to use an Input component that takes the ref via forwardRef.

user_13762301 · Answer

You have two problems. The main problem is your use of Array#fill() which when used like this fills the array with references to a single object. As such you are ending up with a single ref which you succesively assign each input to. The solution is to map the array and return a new ref on each iteration.

const array = new Array(5).fill(null).map(() => createRef());
// or
const array = Array.from({length: 5}, () => createRef());

Your second problem is that enter automatically submits the form so you need to preventDefault() at the top level of the if block.

const { createRef } = React;

const array = Array.from({length: 5}, () => createRef());

const Step1 = () => {

  function focusNextRef(e, index) {
    if (e.key === 'Enter') {
      e.preventDefault(); // <-- move preventDefault()
      if (array[index + 1]) {
        array[index + 1].current.focus();
      } else {
        console.log('submit');
      }
    }     
  }

  return (
    
      
        {array.map((item, index) => {
          return (
             focusNextRef(e, index)}
            />
          );
        })}
        
      
    
  );
};

ReactDOM.render(
  ,
  document.getElementById('root')
);

Render an array of refs

1 Answers