Passing an event method between siblings component in ReactJS - reactjs

Question

I am practicing in ReactJS and I have a trouble in passing a method between 2 sibling component. I have created React app which has 3 component: MainPage is the parent, FirstPage and SecondPage are two children. In FirstPage component there is a header with some text and SecondPage component has a button. My main goal is to pass the change-header method I defined in FirstPage, through MainPage component, to SecondPage component, so that when I click on the button that event method is fired.
I follow this tutorial https://medium.com/#ruthmpardee/passing-data-between-react-components-103ad82ebd17 to build my app. I also use react-router-dom in MainPage to display two page: one for FirstPage, another for SecondPage
Here is my FirstPage component:
import React from 'react'
class FirstPage extends React.Component{
constructor(props){
super(props)
this.state = {
msg: 'First page'
}
}
componentDidMount(){
this.props.callBack(this.changeText.bind(this))
}
render(){
return(
<div className = "first">
<h2>{this.state.msg}</h2>
</div>
)
}
changeText(){
{/* event method I defined to change the header text*/}
this.setState({msg: 'Text changed !!'})
this.props.history.push('/first')
}
}
export default FirstPage
and MainPage component:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import React from 'react'
import FirstPage from '../component/FirstPage'
import SecondPage from '../component/SecondPage'
class MainPage extends React.Component{
constructor(props){
super(props);
this.state = {
func : null
}
}
myCallBack(callFunc){
this.setState({func: callFunc})
}
render(){
return(
<div className = "main">
<Router>
<Switch>
<Route path = "/first" render = {(props) => <FirstPage {...props} callBack = {this.myCallBack.bind(this)} />} />
<Route path = "/second" render = {(props) => <SecondPage {...props} myFunc = {this.state.func}/>} />
</Switch>
</Router>
</div>
)
}
}
export default MainPage
Follow the tutorial, I defined the property func inside MainPage state to store the event method from FirstPage. The myCallBack method is used to change the property of state. And I pass that method to the FirstPage by using callBack = {this.myCallBack.bind(this)}. So in the FirstPage, when the this.props.callBack(this.changeText.bind(this)) called, the event method will be stored into MainPage state
And finally my SecondPage commponent:
import React from 'react'
class SecondPage extends React.Component{
render(){
return(
<div className = "second">
<h2>Second page</h2>
<button onClick = {this.props.myFunc}> Click here to change</button>
</div>
)
}
}
export default SecondPage
App.js :
import React from 'react'
import MainPage from './component/MainPage'
function App() {
return (
<div className = "App">
<MainPage/>
</div>
);
}
export default App;
I simply pass the this.state.func that store my event to SecondPage through props. And I think this should be work: when I click the button, React will redirect to the 'FirstPage' and change the header field. But in fact when I clicked, nothing happen. Can anyone show me which part I did wrong ?

Answer 1

Hi Quang.
In order to do this, that is a possible approach you can follow:
For any shared data between two siblings of a parent component, we basically put that shared data in the closest parent, which in this case MainPage
Further:
The content you want show in FirstPage and change by SecondPage should exist in the state of the parent component MainPage
Pass the content to the FirstPage as a prop, such like content={this.state.content}
The function that changes the content changeText should be inside MainPage because it will be changing the specific state that is sent as a prop to the FirstPage
Function, when invoked by SecondPage should be changing the state of the MainPage, which is passed to the FirstPage as the content of the header.
Solution:
- FirstPage:
// Re-write as a functional component, because we won't be using lifecycle methods, thus, no need for it to be class component.
import React from 'react'
const FirstPage = (props) => (
<div className = "first">
<h2>{props.msg}</h2>
</div>
);
export default FirstPage
- SecondPage:
// Re-write as a functional component, because we won't be using lifecycle methods, thus, no need for it to be class component.
import React from 'react'
const SecondPage = (props) => (
<div className = "second">
<h2>Second page</h2>
<button onClick = {props.changeMsg}> Click here to change</button>
</div>
)
export default SecondPage
- MainPage:
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React from "react";
import FirstPage from "../component/FirstPage";
import SecondPage from "../component/SecondPage";
class MainPage extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: '', //added msg that is shown in FirstPage
};
}
// Added the function changeMsg to modify msg value in the state by the button onClick event from SecondPage.
changeMsg(){
{/* event method I defined to change the header text*/}
this.setState({ msg: 'Text changed !!' })
this.props.history.push('/first')
}
// Cleared some un-used functions.
// passed msg for FirstPage as a Prop
// passed changeMsg to SecondPage as a Prop
render() {
return (
<div className="main">
<Router>
<Switch>
<Route
path="/first"
render={props => (
<FirstPage {...props} msg={this.state.msg} />
)}
/>
<Route
path="/second"
render={props => (
<SecondPage {...props} changeMsg={this.changeMsg.bind(this)} />
)}
/>
</Switch>
</Router>
</div>
);
}
}
export default MainPage;