Search code examples
reactjstypescriptmodal-dialogsemantic-ui-reactreact-big-calendar

Open Semantic UI React Modal by double clicking an event in react big calendar


I'm trying to open a Semantic UI React Modal when user double clicks an event in react big calendar. My doubleclick event handler is

eventDoubleClick() {    
    this.setState({
      open: true
    });    
    return <EditEvent />;
}

EditEvent is the class component which contains Modal. Its code is

class EditEvent extends React.Component {
 state = { open: false, startDate: moment() };
 show = dimmer => () => this.setState({ dimmer, open: true });
 close = () => this.setState({ open: false });
 open = () => this.setState({ open: true });

 constructor(props) {
   super(props);       
  }
  render() {
   <div>
     ... Semantic UI Modal goes here
   </div>
  }
 }
 export default EditEvent;

Haven't been able to find any help about this issue so far


Solution

  • I solved this problem by moving the Modal inside the component which had big calendar implementation and used state to set the open attribute for modal. It worked like a charm :)