Calling Child Components Functions from Parent Components - reactjs

Question

I want to keep my controls as self-contained as possible, and doing so causes the need for my parent controls to access their children's functions.
Examples of this would be a list child component inside of its parent,when an additional record is added, then the parent needs to tell the child to re-fetch its data, or there is modal control on the page and action on the page triggers and the parent needs to call the modal show function.
Adding a ref to the child component and calling the method that ways works but feels incorrect and will force you to use none stateless components. The second way is passing in a prop into the child component and applying the function to that also works but if parent updates that cause the child to update the reference can get lost since the reference is just a local variable.
const Parent = ({}) => {
let childComponent = null;
return (
<React.Fragment>
<button
onClick={() => {
childComponent.show({});
}}
/>
<Child
recordId={recordId}
permissions={permissions}
actions={ref => (childComponent = ref)}
/>
</React.Fragment>
);
};
export default Parent;
const Child = ({ actions }) => {
const [show, setShow] = useState(false);
const [initValues, setInitValues] = useState(null);
if (actions) {
actions({
show: data => {
if (data) {
setInitValues(data);
}
setShow(true);
}
});
}
return (
<Modal size="md" isOpen={show} onClosed={() => handleHide()}>
</Modal>
)}
export default Child ;
What is the correct way of handling this?

Answer 1

Something like this?
[CodePen Mirror]
ORIGINAL:
// PARENT
function Parent(props) {
const doChildMethod = event => {
console.log("[Parent]::Invoked Child method from parent");
alert(event.target.innerHTML);
};
return (
<div style={{ border: "1px solid blue" }}>
<p>PARENT</p>
<Child iAmAChildMethod={e=>doChildMethod(e)} />
</div>
);
}
// CHILD
function Child(props) {
const handleClick = event => {
props.iAmAChildMethod(event);
console.log("[Child]::Do whatever you want in the child");
};
return (
<div style={{ border: "1px solid red", margin: "5px" }}>
<p onClick={handleClick}>CHILD - CLICK ME</p>
</div>
);
}
ReactDOM.render(<Parent />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
UPDATED:
Keep in mind this is an anti-pattern.
// Parent
const Parent = () => {
let child;
function getChildData(callbacks){
child = callbacks;
}
return (
<div>
<button onClick={() => child.getData()}>Retreive Child Data</button>
<Child onRetreiveChildData={callbacks => getChildData(callbacks)} />
</div>
);
}
// Child
const Child = ({ onRetreiveChildData }) => {
const [state, setState] = React.useState({
data: "Default Child Data"
});
if (onRetreiveChildData) {
onRetreiveChildData({
getData: () => getData("Data from Child: " + Math.random())
});
}
function getData(data){
setState({ data: data });
};
return (
<pre>{state.data}</pre>
)
};
ReactDOM.render(<Parent />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id='root' style='width: 100%; height: 100%'>
</div>