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

Shan · Accepted Answer · 2022-01-19 10:37:25Z

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>
  ]);
};

answered Jan 19, 2022 at 10:37

Shan

1,5684 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Assign ref dynamically inside concat in react render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related