access method in child1 component from child2 component - reactjs

Question

Currently I have 3 components: Child1, Child2 and Parent. When a button in Child2 is pressed, I want to call a function in Child1 component.
This is what I have tried so far but I keep getting error saying
this.refs.child.child2Function is not a function
What would be the right way to handle such situation (calling a function in one child component from another child component)?
I am also using redux in my project. But my Child2 component is rendered in multiple tabs. So I cannot update the value using redux as the value will be updated throughout all the Child2 component.
Parent.js
class Parent extends Component{
parentFunction = () => {
console.log("This line gets printed. But the line below this breaks");
this.refs.child.child2Function();
}
render() {
return (
<View style={styles.pageContainer}>
<Child1 ref="child"/>
<Child2 parentFunc={this.parentFunction}/>
</View>
)}
Child2.js
class Child2 extends Component{
render() {
return (
<View style={styles.pageContainer}>
<Button
title="CLICK ME"
onPress={()=>this.props.parentFunc()} />
</View>
)}
Child1.js
class Child1 extends Component{
child1Function = () => {
console.log("Print this");
}
render() {
return (
<View style={styles.pageContainer}>
<Text>AAAA</Text>
</View>
)}
UPDATE:
Code works properly in the snack example set up here : https://snack.expo.io/rk4Y9RWUm
But I keep getting error when I have similar solution in my react native app. I have included screenshot of my code, console log and error message here : https://drive.google.com/drive/folders/1RQYicEC_wqHKPRCs9pVsMZyuTxyiUbq2?usp=sharing

Answer 1

You can not invoke a function inside child1 component directly from child2. Because the function inside child1 is encapsulated to child1 component it is not visible from outside. The only way to communicate between two components is through common parent component. You can declare required state and functions inside parent component and pass them as props to the child components. Child components then can share and change these states through functions passed from parent component. You can share state change between sibling component which share the same parent component. The only way of communication between sibling components is though common Parent component. Here is the link to sample code as an example: https://codesandbox.io/s/wom3622q8
Code sample:import React from "react";
const ChildOneComponent ({ number, handleChangeNumber }) => {
return (
<div>
<button onClick={handleChangeNumber}>Change Number</button>
State in ChildOneComponent is : {number}
</div>
);
};
const ChildTwoComponent ({ number, handleChangeNumber }) => {
return (
<div>
<button onClick={handleChangeNumber}>Change Number</button>
State in ChildTwoComponent is : {number}
</div>
);
};
class ParentComponent extends React.Component {
state = { number: 0 };
handleChangeNumber = () => {
let number = this.state.number;
this.setState(() => ({ number: ++number }));
console.log("cliked");
};
render() {
return (
<div>
<ChildOneComponent
number={this.state.number}
handleChangeNumber={this.handleChangeNumber}
/>
<ChildTwoComponent
number={this.state.number}
handleChangeNumber={this.handleChangeNumber}
/>
</div>
);
}
}