Assign ref dynamically inside concat in react render

Question

I have an array of objects which I create on pressing the add button.The add handler function is as below.

const [inputList,setInputList] = useState([])

const elref=useRef(null)

const add = () => {
setInputList([...inputList,
<div>
<EditContainer

onTextChnage={handleChange}
ref={elref}
/>

</div>
}])}

This create multiple EditContainer elements all of which share the same ref.How can I create refs like this on the fly for a dynamic array of Object which is a state

Answer 1

editContainerRefs.current will provide you the array of EditContainer component refs.

const [inputList, setInputList] = useState([]);

const editContainerRefs = useRef([])

const add = () => {
  const newRef = React.createRef()
  editContainerRefs.current.push(newRef)
  setInputList([
    ...inputList,
    <div>
      <EditContainer onTextChnage={handleChange} ref={newRef} />
    </div>
  ]);
};