根据状态显示组件

我有两个组件要根据状态显示。 基本上,当我单击按钮时,我想切换两个组件。我不明白为什么当我点击这个按钮时什么也没变。

import React, { Component } from 'react';
import { Route, Link, NavLink, Redirect } from 'react-router-dom'

class Header extends Component {

    constructor(props) {
        super(props);

        this.state = {isToggleOn: false};
        this.handleClick = this.handleClick.bind(this);

    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return(
            <header>
                {this.state.isToggleOn ? <MenuOpened /> : <MenuClosed />}
            </header>
        )
    }
}

const MenuClosed = () => {
    return (
        <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
    )
}

const MenuOpened = () => {
    return(
        <ul>
            <li><NavLink to="/page-1" exact>page1</NavLink></li>
            <li><NavLink to="/page-2" exact>page2</NavLink></li>

        </ul>
    )
}

export default Header;