passing function from parent to child component - reactjs

Question

I am trying to do a single page application navigation, so the components load into the page container when the user clicks on menu links. This is what I've tried:
App.tsx:
import * as React from 'react';
import Home from './components/Home';
import MainMenu from './components/MainMenu';
import SignUp from './components/SignUp';
interface IProps {
SignUp?: boolean;
}
interface IState{
SignUp: boolean;
}
class App extends React.Component<IProps,IState>
{
constructor(props: IProps, state: IState) {
super(props);
this.renderPage = this.renderPage.bind(this);
this.state = state;
this.setState({
SignUp: false
});
}
public renderPage(page: string)
{
if(page === 'SignUp')
{
this.setState({
SignUp: true
});
}
}
public render()
{
let page = <Home/>;
if(this.state.SignUp)
{
page = <SignUp/>;
}
return (
<div className="App">
<MainMenu renderPage={this.renderPage}/>
<div className="container-fluid">
{page}
</div>
</div>
);
}
}
export default App;
MainMenu.tsx:
import * as React from 'react';
import './Home.css';
interface IProps
{
renderPage: (page: string) => void
}
class MainMenu extends React.Component<IProps> {
public render() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#" onClick={this.props.renderPage('Home')}>
Home
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#" onClick={this.props.renderPage('SignUp')}>
Sign Up
</a>
</li>
</ul>
</div>
</nav>
);
}
}
export default MainMenu;
I got this error in MainMenu.tsx:
Type 'void' is not assignable to type '((event:
MouseEvent) => void) | undefined'.

Answer 1

Inside MainMenu component you invoke the passed function, not assingn it to an a element.
<a className="nav-link" href="#" onClick={() => this.props.renderPage('SignUp')}>
Sign Up
</a>
The example above should solve the error, even though you don't pass the event argument.
However, wouldn't it be better if you used react-router, which handles rendering components depending on navigation?