ReactのsetStateでstateの値を更新したいのですが、反映されません

初歩的な質問で申し訳ありません。
Reactを勉強して、試しに「画像をクリックするとその場所の地図がモーダルで表示される」というものを作ってみようと思いました。

onClickイベントを使い、stateの値を更新することでモーダルを表示させたり非表示にしたりという動きにしたいのですが、上手くいきません。
clickOpenはうまく動作して「isModalOpen」の値がtrueに変わり、モーダルが表示されるのですが、閉じる処理のclickCloseが動作しません。
「isModalOpen」の値が再びfalseにならないといった感じです。

どうすればよいでしょうか。

該当のソースコード

<body>
    <div id="root"></div>

    <!----- ここからJSX ----->
    <script type="text/babel">

        {/**** モーダルのコンポーネント ****/ }
        class MapBtn extends React.Component {
            constructor(props) {
                super(props);
                this.state = { isModalOpen: false };
            }

            clickOpen() {
                this.setState({ isModalOpen: true });
            }

            clickClose() {
                this.setState({ isModalOpen: false});
            }

            render() {
                let modal;
                if (this.state.isModalOpen) {
                    modal = (
                        <div className="modal_wrap">
                            <div className="modal_inner">
                                <img src={this.props.modal} />
                                <div onClick={() => { this.clickClose() }} className="textCont">
                                    <p>閉じる</p>
                                </div>
                            </div>
                        </div>
                    );
                }

                return (
                    <div onClick={() => { this.clickOpen() }} className="mapContainer">
                        <img className="mapImg" src={this.props.image} />
                        <p className="mapName">{this.props.name}</p>
                        {modal}
                    </div>

                );
            }
        }




        {/**** マップ一覧 ****/ }
        const mapList = [
            {
                name: "東京",
                image: "img/map01_loc.jpeg",
                modal: "img/modal01.png"
            },
            {
                name: "千葉",
                image: "img/map02_loc.jpeg",
                modal: "img/modal02.png"
            },
            {
                name: "神奈川",
                image: "img/map03_loc.jpeg",
                modal: "img/modal03.png"
            },
        ];

        ReactDOM.render(
            <div className="container">
                <MapBtn
                    name={mapList[0].name}
                    image={mapList[0].image}
                    modal={mapList[0].modal}
                />
                <MapBtn
                    name={mapList[1].name}
                    image={mapList[1].image}
                    modal={mapList[1].modal}
                />
                <MapBtn
                    name={mapList[2].name}
                    image={mapList[2].image}
                    modal={mapList[2].modal}
                />
            </div>,
            document.getElementById('root')
        );

    </script>
</body>

hoshi-takanori

2022/05/06 09:11

onClick のある div が入れ子になってるので、clickClose で stopPropagation を呼ぶ必要があるかと。 https://ja.javascript.info/bubbling-and-capturing

nagi_wd11

2022/05/06 11:18

無事解決できました！バブリングという概念を知れて、改めて勉強になりました。ありがとうございました！

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

回答1件

自己解決

clickClose(e) {
      e.stopPropagation();
      this.setState({ isModalOpen: false}); 
    }

<div onClick={(e) => { this.clickClose(e) }} className="textCont">
     <p>閉じる</p>
</div>

イベントを渡してe.stopPropagation()とすることで解決できました。

投稿2022/05/06 11:21

nagi_wd11

総合スコア10