React.js setState does not update state even if render method was called

Question

I cannot believe that I cannot update state by setState. I want to update cardModalOpen state to close the Modal.

I add bind(this) but it still does not work.

(Modal is opened by click Card Component)

However, I did setState({cardModalOpen: false}) by closeModal() function but it is still true even after render method was called.

Can someone please explain what I am doing wrong.

This is my code.

index.js

import React, { Component }from 'react';
import { Button, Card, Image, Header, Modal, Form, Input } from 'semantic-ui-react'

class App extends React.Component {    
    state = { cardModalOpen:false }

    showCardModal() {
        this.setState({cardModalOpen:true})    
    }

    closeModal(){
        this.setState({cardModalOpen:false})
    }

    render() {
        const messagesDataNew = [];

        for (var i = 0; i < 3; i++) {
            messagesDataNew.push(
              <Card
                onClick={() => {
                  this.showCardModal();
                }}
              >
                <DetailModal
                  cardModalOpen={this.state.cardModalOpen}
                  closeModal={this.closeModal}
                />
              </Card>
            );
          }

        return <div>{messagesDataNew}</div>;
   }
}

DetailModal.js

import React, { Component }from 'react';
import { Button, Card, Image, Header, Modal, Form, Input } from 'semantic-ui-react'

class DetailModal extends Component{

render(){

    return(
        <Modal open={this.props.cardModalOpen} onClose={()=>{this.props.closeModal()}} >
            <Modal.Header>Select a Photo</Modal.Header>
            <Modal.Content image>
                <Image wrapped size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' />
                <Modal.Description>
                    <Header>Default Profile Image</Header>
                    <p>We've found the following gravatar image associated with your e-mail address.</p>
                    <p>Is it okay to use this photo?</p>
                </Modal.Description>
            </Modal.Content>
            <Button onClick={()=>{this.props.closeModal()}}>Close</Button>
        </Modal>
    )
  }

  }

export default DetailModal;

Here is a codesandbox with issue reproduced https://codesandbox.io/s/jjk7nw647y

Answer 1

Do not forget bind your state handler functions:

constructor(props){
  super(props)
  this.showCardModal=this.showCardModal.bind(this)
  this.closeModal =this.closeModal.bind(this)
}

Answer 2

In codesandbox you shared there is no clickable trigger-element for any of the modals. That's because of you are rendering an empty content of Card .

Here is my changes to your example https://codesandbox.io/s/l97n95n2om

The only difference is line #20 - I added a text Some text so your Card component has valid visible (and clickable) DOM element.