Ggtcf

I am working on a React App, trying to call a parent method from a child component, some code of the parent component below:

 class NavigationBar extends Component 
 constructor(props)
 super(props);
 this.state=isLoggedIn: false;
 

 updateLoginState()
 alert("Login from NavigationBar");
 

 GetBar() 
 //const isLoggedIn = this.props.isLoggedIn;
 if (false) //isLoggedIn
 return this.UserNavBar();
 
 return this.StrangerNavBar();
 

 StrangerNavBar()
 return (

 <div>
 <HashRouter> 
 <div>
 /* ... */ 
 <div className="content">
 <Route exact path="/LoginCC" loginUpdate=this.updateLoginState component=LoginCC />
 </div>
 </div>
 </HashRouter>
 </div> 
 );
 


 render() 
 return (
 this.GetBar()
 );
 

 

 export default NavigationBar;

This component is supposed to redirect the user to different content pages based on whether or not he is logged in, using a Router. If a button is clicked in LoginCC.js the method updateLoginState should be invoked which just displays a message for now. The child content page LoginCC.js looks as follows:

class LoginCC extends Component 

 constructor(props)
 super(props);
 this.state = isLoggedIn: false;
 

 render() 
 return (
 <div>
 <HashRouter>
 /* ... */ 
 <Button variant="primary" size="lg" block onClick=this.props.loginUpdate>
 Log in
 </Button> 
 /* ... */ 
 </HashRouter>
 </div>
 );
 


export default LoginCC;

I passed the method reference as a prop to LoginCC when rendering this component using the Router, so a message should pop up if I press the button, but nothing happens.

Am I passing the prop incorrectly or something else I've missed? I'm new to React so any help is appreciated.

Route doesn't pass any custom props to components. You should use other method to pass functions.

One of solutions is:

<Route exact path="/LoginCC" render=
 props => <LoginCC ...props loginUpdate=this.updateLoginState/>
 />

Note that updateLoginState will not get this when called. You should either bind it or declare it as an arrow function to get the correct this.

Also check the Context documentation.