无法使用父 class 组件和子功能组件打开/关闭模态

Question

I have a parent component in which I'm struggling to properly open/close the child component (modal). The two code boxes below are simplified examples of my components.

EDIT: Here is a code sandbox with the following code -- there isn't an actual modal, however i've logged all of the stateful values that I assume will have an effect on this problem and you can see how they change/don't change as I hope they would.

Code Sandbox

• When the parent component is open, I can click the MenuItem and I can see the state change, however the modal doesn't open unless I close the parent component temporarily and reopen it (then the parent component opens with the modal open already)
• When the modal is open, and I try to close by clicking the close button (which has the state changing function from parent inside of the onClick method. this.state.showModal remains true, and doesn't change to false.
• If I add a closeModal stateful value to the child component and change it during the close buttons onClick, this.state.showModal still remains true.

Thanks to whoever reaches out, and if you have any clarifying questions feel free to ask!

class Parent extends Component {
    
    constructor(props) {
      super(props);
      this.showModal = this.showModal.bind(this);
      this.closeModal = this.closeModal.bind(this)
      this.state = {
        showModal: false
      };
    this.showModal = this.showModal.bind(this)
    this.closeModal = this.closeModal.bind(this)
    }
    showModal() {
      this.setState({ showModal: true });
    }
    closeModal() {
      this.setState({ showModal: false });
    }
    render() { 
      return (
      <MenuItem onClick={this.showModal}>
      <ChildComponent
       prop1={prop1}
       isOpen={this.state.showModal}
       closeModal={this.closeModal}
       />
       </MenuItem>
)}

const ChildComponent = ({
  prop1,
  isOpen,
  closeModal
  }) => {
  
  const [modalOpen, setModalOpen] = useState(isOpen)


  useEffect(() => {
    setModalOpen(isOpen)
  },[isOpen])
  
  console.log('isopen on child', isOpen)
  console.log('modalOpen', modalOpen)
  return (
  <div>
   {modalOpen && (
  <button
  onClick={() => {
    setModalOpen(false)
    closeModal()
  }}
  >
    {'click to close modal'}
    </button>
   )}
   </div>
)}

)}

Answer 1

I figured out my problem!

In my parent component the onClick handler that sets the modal open wrapped my child component. I needed to remove it and conditionally render it separately like so:

<div>
        <div onClick={this.showModal}>{"Click here to open modal"}</div>
        {this.state.showModal && (
          <ChildComponent
            prop1={prop1}
            isOpen={this.state.showModal}
            closeModal={this.closeModal}
          />
        )}
      </div>