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 - stackoverflow.com/a/54633947/5618326. — Mile Mijatović
– Mile Mijatović, Commented Jul 25, 2022 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
– moaksan, Commented Jul 25, 2022 at 14:26

Ahmad · Accepted Answer · 2022-07-25 14:30:35Z

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>
      ) : (
        <></>
      )}
    </>
  );
}

Duy Tran · Accepted Answer · 2023-01-05 17:17:13Z

0

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

answered Jan 5, 2023 at 17:17

Duy Tran

1,2879 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related