I have two components Grid and Filter, I need to link these two components. That is, pass the Grid link to the Filter. The link to the Grid in the Filter is needed in order to be able to tell the filter which grid to work with.
App.js:
return (
<div>
<Grid ref={ref1}.../>
<Filter gridRef={ref1}.../>
<.../>
</div>
)
What do I need to do?
You will have to make the grid a frowardRef component. Understand forwardRef components.
Next, create a ref (let say rfGrid) with useRef hook in the parent component. Pass rfGrid to the ref prop of the Grid component and pass rfGrid to the gridRef prop of the Filter component.
import React, { useRef } from 'react';
const Parent = () => {
const rfGrid = useRef();
return (
<div>
<Grid ref={rfGrid} />
<Filter gridRef={rfGrid} />
</div>
);
};