How to show Modal when we click on it using reactjs?

Question

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?

first Component:

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 (
      <div>
        <div style={{ height: "500pt" }}>
          <Calendar
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
            defaultDate={moment().toDate()}
            localizer={localizer}
            onDrillDown={this.openModal}
          />
        </div>
        {this.state.showModal ? (
          <CreateEvent
            isOpen={this.state.showModal}
            onClose={this.handleCloseModal}
          />
        ) : (
          ""
        )}
      </div>
    );
  }
}
export default ShowCalendar;

2nd Component: Modal.jsx

import React, { Component } from "react";
import { Modal, Button, Header, Icon } from "semantic-ui-react";
export default class CreteEvent extends Component {
  render() {
    return (
      <div>
        <Modal isOpen={this.props.isOpen}>
          <Modal.Header>Create Event</Modal.Header>
          <Modal.Content>
            <Modal.Description>Hi Everyone</Modal.Description>
          </Modal.Content>

          <Modal.Actions>
            <Button primary onClick={this.props.onClose}>
              Close <Icon name="right chevron" />
            </Button>
          </Modal.Actions>
        </Modal>
      </div>
    );
  }
}

Here is the entire code "Code: "https://codesandbox.io/s/strange-bhaskara-1n1jc""

@Thomas__ - in 139th line openModal is there. Could you please preview it once — Arunya, Mar 03 '20 at 07:24
Seems you have strict mode enabled that is blocking some components — Thomas__, Mar 03 '20 at 07:35
@i Couldn't able to figure it out, where i'm going wrong. Could you please help me in this? — Arunya, Mar 03 '20 at 07:54

fxdxpz · Answer 1 · 2020-03-03T09:03:27.237

Add dependency to semantic-ui-css

Import css in your main index.js file:

import 'semantic-ui-css/semantic.min.css';

You need to change isOpen to just open in Modal:

import React, { Component } from "react";
import { Modal, Button, Header, Icon } from "semantic-ui-react";
export default class CreteEvent extends Component {
  render() {
    return (
      <div>
        <Modal open={this.props.isOpen}>
          <Modal.Header>Create Event</Modal.Header>
          <Modal.Content>
            <Modal.Description>Hi Everyone</Modal.Description>
          </Modal.Content>

          <Modal.Actions>
            <Button primary onClick={this.props.onClose}>
              Close <Icon name="right chevron" />
            </Button>
          </Modal.Actions>
        </Modal>
      </div>
    );
  }
}

Here is fixed codesandbox: https://codesandbox.io/s/sad-lamport-y6jqg (with aforementioned import)

Thanks! but it's not coming in the form of Modal view, it is showing down while we click on the date. Is it possible to get the Modal format? — Arunya, Mar 03 '20 at 08:24

score 0 · Accepted Answer · answered Mar 03 '20 at 08:53

So I have got in to the office and could have look, you never include the semantic UI css: https://react.semantic-ui.com/usage/#theme

In index.js https://react.semantic-ui.com/usage/#theme and add semantic-ui-css as a dependency, and as @PompolutZ mentioned the modal needs open vs isOpen

There is probably some other issues, but changing the default state to true now shows the modal - might just need to fix up how the modal gets displayed, i.e. when does openModal get called. (Ah clicking the date is the driver (never used the calendar component before: had to look at the docs)

https://codesandbox.io/s/morning-darkness-hz06m?fontsize=14&hidenavigation=1&theme=dark

How to show Modal when we click on it using reactjs?

2 Answers2