Got an interesting problem withs refs.
I'm mapping over a component and rendering it multiple times and passing a ref to each one
const ref = useRef()
{data.map(d) => (
<Component
{...lotsOfOtherProps}
ref={ref}
/>
)}
Then in a grandchild component I have:
const anotherRef = React.useRef()
useImperativeHandle(ref, () => ({
reset: () => {
anotherRef?.current.reset()
},
}))
In this component I have a button and when I toggle it I call
anotherRef?.current?.reset() and this works and does what I want
but I'm wondering when I click a "reset all" button, how I can get all the refs to reset?
You are replacing the ref with each iteration and finally assigning it to the last element. You need to create an array of refs.
const refs = [];
{
data.map((d, index) => {
const newRef = React.createRef();
refs[index] = newRef;
return <Component {...lotsOfOtherProps} ref={newRef} />;
});
}
refs will contain the array of ref for each component created from data array.