Using a hook for reusable Dialog state

DialogContext.js

import { useState } from 'react';

function DialogContext({ initialState = false, children }) {
  const [isOpen, setIsOpen] = useState(initialState);
  
  return children(
    isOpen,
    () => setIsOpen(true),
    () => setIsOpen(false)
  )
}

export default DialogContext;

View.js

const ChoiceView = () => (
  <DialogContext>
    {(isOpen, handleOpen, handleClose) => (
      <Fragment>
        <Fab
          color="primary"
          aria-label="Add"
          onClick={handleOpen}
          className={this.props.classes.fab}>
          <Icon>add_icon</Icon>
        </Fab>
        <AddChoiceDialog open={isOpen} onClose={handleClose} />
      </Fragment>
    )}
  </DialogContext>
);

export default ChoiceView;