ReactでonClickを使た時にイベントが発火しない

Reactでモダールの閉じるボタンを作る。

Reactでモーダルを作っていて、モーダルの閉じるボタンを作っているときに、エラーはでないのですがonClickのあるクラスを押したときにモーダルを閉じるイベントが発生しません。
実現したいことは、閉じるボタンを押したときにモーダルが閉じるようにしたいです。
よろしくお願いいたします。

動作環境
使っているエディター　VScode
OS　　　　　　　　　　Windows１０
npm ver 6.9.0
node ver v10.16.3

発生している問題・エラーメッセージ

エラーメッセージは特にでないですが、onClickのクラスを押してもイベントが発生しないです。

該当のソースコード

React.js
1class Modal extends React.Component {
2    constructor(props) {
3        super(props);
4        this.state={isModalOpen:false};
5      }
6
7    handleClickLesson(){
8    this.setState({isModalOpen:true});
9  }
10
11  handleClickClose(){
12    this.setState({isModalOpen: false});
13  }
14
15  test() {
16      console.log('aaa');
17  }
18
19    render(){
20        let modal
21
22        if(this.state.isModalOpen){
23            modal=(
24                <div>
25                    <nav className="navmenu" id='navmenu-1' >
26                         <ul>
27                             <li><a href="">Top</a></li>
28                             <li><a href="about.html">About</a></li>
29                             <li><a href="thoughts.html">Thoughts</a></li>
30                             <li><a href="works.html">Works</a></li>
31                             <li><a href="https://taroken.org/contact/">Contact</a></li>
32                         </ul>
33                        <button onClick={()=>{this.handleClickClose()}}>
34                          とじる
35                        </button>
36                    </nav>
37                 </div>
38            )
39        }
40
41        return(
42            <div>
43                {modal}
44                <button onClick={()=>{this.handleClickLesson()}}>
45                  開く
46                </button>
47                <span>test</span>
48                <span>test</span>
49                <span>test</span>
50            </div>
51
52        );
53    }
54}

試したこと

modal-close-btnクラスのonClick={()=>{this.handleClickClose()}をonClick={()=>{this.test()}にしてイベントが発火するか試し、コンソールにaaaが表示されました。

行動規範の内容に同意します

回答2件

解決時のコード

React.js
1class Modal extends React.Component {
2    constructor(props) {
3        super(props);
4        this.state={isModalOpen:false};
5      }
6
7    handleClickLesson(){
8    this.setState({isModalOpen:true});
9  }
10
11  handleClickClose(){
12    this.setState({isModalOpen: false});
13  }
14
15  test() {
16      console.log('aaa');
17  }
18    render(){
19        let modal;
20
21        if(this.state.isModalOpen){
22            modal=(
23                <div>
24                    <nav className="navmenu" id='navmenu-1' >
25                         <ul>
26                             <li><a href="">Top</a></li>
27                             <li><a href="about.html">About</a></li>
28                             <li><a href="thoughts.html">Thoughts</a></li>
29                             <li><a href="works.html">Works</a></li>
30                             <li><a href="https://taroken.org/contact/">Contact</a></li>
31                         </ul>
32                        <button onClick={()=>{this.handleClickClose()}}>
33                          とじる
34                        </button>
35                    </nav>
36                 </div>
37            )
38        }
39
40        return(
41            <div>
42                {modal}
43                <button onClick={()=>{this.handleClickLesson()}}>
44                  開く
45                </button>
46                <span>test</span>
47                <span>test</span>
48                <span>test</span>
49            </div>
50
51        );
52    }
53}