import React from 'react';
import { render } from 'react-dom';
import ContextualDialog from 'react-contextual-dialog';

const Main = ({ children }) => (
  <ContextualDialog.DialogContainer>
    {children}
  </ContextualDialog.DialogContainer>
);

render(<Main />, document.getElementById('app'));

import React, { Fragment } from 'react';
import { render } from 'react-dom';
import ContextualDialog from 'react-contextual-dialog';

const Dialog = ({ open, close, isOpen }) => (
  <Fragment>
    {!isOpen && <button onClick={open}>Open the dialog</button>}
    {isOpen && (
      <div>
        I am a dialog
        <button onClick={close}>Close Me</button>
      </div>
    )}
  </Fragment>
);

const Popup = () => (
  <ContextualDialog.Dialog>
    <Dialog />
  </ContextualDialog.Dialog>
);

const Main = ({ children }) => (
  <ContextualDialog.DialogContainer>
    {children}
  </ContextualDialog.DialogContainer>
);

render(
  <Main>
    <Popup />
  </Main>,
  document.getElementById('app')
);