How to show Modal when we click on it using reactjs? - 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""

Answer 1

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

Answer 2

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)