In react, how can I add multiple ref to the element using map?

Question

export default function RenderPages({storage, setStorage, state, setState}){
const elRefs=[]
for(let i=0; i<storage[state.currentFolderId][state.currentFileId].content.length; i++){
    elRefs.push(useRef())
}

return (
    <>
    {
      renderable
      ?<div className="writing">
        {storage[state.currentFolderId][state.currentFileId].content.map((page, index)=>
        <div className='textarea'>
          <textarea ref={elRefs[index]} placeholder='write here' value={page} id={"page"+index} onChange={(e)=>onChange(e, index)} rows={rows} cols={cols}></textarea>
        </div>)}
      </div>
      : <></>
    }
    </>
  )
}

I want to attach multiple ref to random number of "textarea" element. the number of element would be determined by the variable, "storage", which is given as props. I got error with above code. Help me please.

Maybe possible duplication ? The answer is here - https://stackoverflow.com/a/54633947/5618326. — Mile Mijatović, Jul 25 '22 at 14:20
This error. "React Hook "useRef" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render" — moaksan, Jul 25 '22 at 14:26

Ahmad Faraz · Accepted Answer · 2022-07-25T14:30:35.070

you don't need to use for loop to push the elements in ref, you already use map in return you can push textarea elements using ref like this way as you can see the below code, I hope this works. thanks

import { useRef } from "react";

export default function RenderPages({storage, setStorage, state, setState}) {
  const elRefs = useRef([]);

  return (
    <>
      {renderable ? (
        <div className="writing">
          {storage[state.currentFolderId][state.currentFileId].content.map((page, index) => (
            <div className="textarea">
              <textarea
                ref={ref => {
                  elRefs.current[index] = ref
                }}
                placeholder="write here"
                value={page}
                id={'page' + index}
                onChange={e => onChange(e, index)}
                rows={rows}
                cols={cols}></textarea>
            </div>
          ))}
        </div>
      ) : (
        <></>
      )}
    </>
  );
}

score 0 · Answer 2 · answered Jan 05 '23 at 17:17

const myRefs = useRef([])
ref={ref => myRefs.current[index] = ref} // <--- Right syntax

Using one ref with multiple current elements is enough
Shouldn't (and don't need) call hook in a loop, in this case, it's invalid https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

In react, how can I add multiple ref to the element using map?

2 Answers2