title: How to show Modal when we click on it using reactjs?
body: <p>I'm new to react and wanted to create a Calendar and wanted to add event to the respective date in the Calendar, when we click on the field it should show the modal popup but modal is not getting displayed. Here i'm using only semantic-ui-react for designing the every component. Can anyone help me to resolve this issue?</p>
  
  <p>first Component: </p>
  
  <pre><code>import React, { Component } from "react";
  import { render } from "react-dom";
  import { Calendar, momentLocalizer } from "react-big-calendar";
  import moment from "moment";
  import "react-big-calendar/lib/css/react-big-calendar.css";
  import CreateEvent from "./CreteEvent";
  
  const localizer = momentLocalizer(moment);
  
  class ShowCalendar extends Component {
    constructor() {
      super();
      const now = new Date();
      const events = [
        {
          id: 0,
          title: "All Day Event very long title",
          allDay: true,
          start: new Date(2015, 3, 0),
          end: new Date(2015, 3, 1)
        },
        {
          id: 1,
          title: "Long Event",
          start: new Date(2015, 3, 7),
          end: new Date(2015, 3, 10)
        },
  
        {
          id: 2,
          title: "DTS STARTS",
          start: new Date(2016, 2, 13, 0, 0, 0),
          end: new Date(2016, 2, 20, 0, 0, 0)
        },
  
        {
          id: 3,
          title: "DTS ENDS",
          start: new Date(2016, 10, 6, 0, 0, 0),
          end: new Date(2016, 10, 13, 0, 0, 0)
        },
  
        {
          id: 4,
          title: "Some Event",
          start: new Date(2015, 3, 9, 0, 0, 0),
          end: new Date(2015, 3, 10, 0, 0, 0)
        },
        {
          id: 5,
          title: "Conference",
          start: new Date(2015, 3, 11),
          end: new Date(2015, 3, 13),
          desc: "Big conference for important people"
        },
        {
          id: 6,
          title: "Meeting",
          start: new Date(2015, 3, 12, 10, 30, 0, 0),
          end: new Date(2015, 3, 12, 12, 30, 0, 0),
          desc: "Pre-meeting meeting, to prepare for the meeting"
        },
        {
          id: 7,
          title: "Lunch",
          start: new Date(2015, 3, 12, 12, 0, 0, 0),
          end: new Date(2015, 3, 12, 13, 0, 0, 0),
          desc: "Power lunch"
        },
        {
          id: 8,
          title: "Meeting",
          start: new Date(2015, 3, 12, 14, 0, 0, 0),
          end: new Date(2015, 3, 12, 15, 0, 0, 0)
        },
        {
          id: 9,
          title: "Happy Hour",
          start: new Date(2015, 3, 12, 17, 0, 0, 0),
          end: new Date(2015, 3, 12, 17, 30, 0, 0),
          desc: "Most important meal of the day"
        },
        {
          id: 10,
          title: "Dinner",
          start: new Date(2015, 3, 12, 20, 0, 0, 0),
          end: new Date(2015, 3, 12, 21, 0, 0, 0)
        },
        {
          id: 11,
          title: "Birthday Party",
          start: new Date(2015, 3, 13, 7, 0, 0),
          end: new Date(2015, 3, 13, 10, 30, 0)
        },
        {
          id: 12,
          title: "Late Night Event",
          start: new Date(2015, 3, 17, 19, 30, 0),
          end: new Date(2015, 3, 18, 2, 0, 0)
        },
        {
          id: 12.5,
          title: "Late Same Night Event",
          start: new Date(2015, 3, 17, 19, 30, 0),
          end: new Date(2015, 3, 17, 23, 30, 0)
        },
        {
          id: 13,
          title: "Multi-day Event",
          start: new Date(2015, 3, 20, 19, 30, 0),
          end: new Date(2015, 3, 22, 2, 0, 0)
        },
        {
          id: 14,
          title: "Today",
          start: new Date(new Date().setHours(new Date().getHours() - 3)),
          end: new Date(new Date().setHours(new Date().getHours() + 3))
        },
        {
          id: 15,
          title: "Point in Time Event",
          start: now,
          end: now
        }
      ];
      this.state = {
        name: "React",
        showModal: false,
        events
      };
      this.openModal = this.openModal.bind(this);
      this.handleCloseModal = this.handleCloseModal.bind(this);
    }
  
    handleCloseModal() {
      this.setState({ showModal: false });
    }
  
    openModal() {
      this.setState({ showModal: true });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div style={{ height: "500pt" }}&gt;
            &lt;Calendar
              events={this.state.events}
              startAccessor="start"
              endAccessor="end"
              defaultDate={moment().toDate()}
              localizer={localizer}
              onDrillDown={this.openModal}
            /&gt;
          &lt;/div&gt;
          {this.state.showModal ? (
            &lt;CreateEvent
              isOpen={this.state.showModal}
              onClose={this.handleCloseModal}
            /&gt;
          ) : (
            ""
          )}
        &lt;/div&gt;
      );
    }
  }
  export default ShowCalendar;
  </code></pre>
  
  <p>2nd Component: Modal.jsx</p>
  
  <pre><code>import React, { Component } from "react";
  import { Modal, Button, Header, Icon } from "semantic-ui-react";
  export default class CreteEvent extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Modal isOpen={this.props.isOpen}&gt;
            &lt;Modal.Header&gt;Create Event&lt;/Modal.Header&gt;
            &lt;Modal.Content&gt;
              &lt;Modal.Description&gt;Hi Everyone&lt;/Modal.Description&gt;
            &lt;/Modal.Content&gt;
  
            &lt;Modal.Actions&gt;
              &lt;Button primary onClick={this.props.onClose}&gt;
                Close &lt;Icon name="right chevron" /&gt;
              &lt;/Button&gt;
            &lt;/Modal.Actions&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>Here is the entire code "Code: "<a href="https://codesandbox.io/s/strange-bhaskara-1n1jc" rel="nofollow noreferrer">https://codesandbox.io/s/strange-bhaskara-1n1jc</a>""</p>