单击另一个组件时如何渲染组件？反应

我有一个组件可以渲染另一个组件，如果在渲染中请注意其他组件

constructor(props) {
        super(props);
        this.state = {
            fieldId: "",
            rating: -1,
            description: "",
            showModal: false
        };
        console.log(props) //week number, beginning with 0
        this.showModal = this.showModal.bind(this);
    }
.
.

.    
showModal() {
        this.setState({
            showModal: true
        })
        console.log("clicked show modal")
    }
.
.
.
.
.
render() {
        var weekId = this.props.weekId;
        if (weekId < this.props.livedWeeks) {
            return <div id={weekId} className="cube-lived"></div>
        } else if (weekId == this.props.currentWeek) { //whenever i click the component right below (cube - green), i want to render, <CalendarFieldModal />
            return <div id={weekId} title={weekId} className="cube green" onClick={this.showModal}> 
                { this.state.showModal ? <CalendarFieldModal /> : null}

            </div>
        } else {
            return <div id={weekId} title={weekId} className="cube white" onClick={this.showModal}> </div>
        }


    }

这是else if元素应该在单击时呈现的组件

    import React from 'react'
import './CalendarFieldModal.css'
class CalendarFieldModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        };

    }



    render() {
        return (
            <div>
                <section className="modal-main">
                    <p>hi</p>
                </section>
            </div>
        )
    }
}

export default CalendarFieldModal;

这是它的CSS

 p{
    font-size: 10000px;
    color: blue;
}

但是，每当我单击时，我都看不到任何东西出现，所以我想知道是什么问题，为什么它不呈现任何东西？例如简单

我想渲染作为测试以查看其是否有效。

编辑：

我发现，每当我第一次单击该组件时，showModal状态在控制台中都会记录为false，并且在第二次单击之前不会显示为true。但是无论如何，即使双击，它仍然不会渲染其他元素，因此仍然停留在该位置