bookmarkUtils.jsx

const Bookmark = ({ clickHandler, icon, tooltip, bookmarkId }) => (
  <DropdownButton 
    title={        <i className={`fa fa-${icon} fa-lg`} aria-hidden="true" /> }
    bsSize="small"
    noCaret
    >
    <MenuItem eventKey="1" onClick={() => clickHandler()} >Food</MenuItem>
    <MenuItem eventKey='2' onClick={() => clickHandler()} >Transportation</MenuItem>
    <MenuItem eventKey='3' onClick={() => clickHandler()} >Utilities</MenuItem>
    <MenuItem eventKey='4' onClick={() => clickHandler()}>Add/Remove Bookmark</MenuItem>
  </DropdownButton>
);

export const CreateBookmark = ({ createBookmark, id }) => (
  <Bookmark
    clickHandler={createBookmark}
    icon="bookmark-o"
    tooltip="Create Bookmark"
    bookmarkId={id}
  />
);

export const DeleteBookmark = ({ deleteBookmark, id }) => (
  <Bookmark
    clickHandler={deleteBookmark}
    icon="bookmark"
    tooltip="Delete Bookmark"
    bookmarkId={id}
  />
);

resource.jsx

  deleteBookmark() {
    bookmarkRequest('delete', this.props.data.id, this.props.csrf).then((success, err) => {
      this.setState({ isBookmark: false, note: '' });
    });
  }

  createBookmark() {
    bookmarkRequest('post', this.props.data.id, this.props.csrf).then((success, err) => {
      this.setState({ isBookmark: true });
    });
  }

...
              {[
                <PrintIcon key="printBtn" resourceId={data.id} csrf={this.props.csrf} />,
                <PdfIcon key = 'pdfBtn' resourceId={data.id} csrf={this.props.csrf} />,
                <OverlayTrigger
                  key="shareBtn"
                  placement="top"
                  overlay={
                    <Tooltip id={`tooltip-share-resource-${data.id}`}>Share Resource</Tooltip>
                  }>
                  <button
                    className="btn pull-right resource-panel-button"
                    onClick={() => this.setState({ shareModalOpen: true })}>
                    <i className="fa fa-share-alt" aria-hidden="true" />
                  </button>
                </OverlayTrigger>,
                <OverlayTrigger
                  key="reportIssueBtn"
                  placement="top"
                  overlay={<Tooltip id={`tooltip-report-issue-${data.id}`}>Report Issue</Tooltip>}>
                  <button
                    className="btn pull-right resource-panel-button"
                    onClick={() => this.setState({ correctModalOpen: true })}>
                    <i className="fa fa-flag" aria-hidden="true" />
                  </button>
                </OverlayTrigger>,,
                isBookmark ? (
                  <DeleteBookmark
                    id={data.id}
                    key="deleteBookmarkBtn"
                    deleteBookmark={() => this.deleteBookmark()}
                  />
                ) : (
                  <CreateBookmark
                    id={data.id}
                    key="createBookmarkBtn"
                    createBookmark={() => this.createBookmark()}
                  />
                )
              ]}
...

util.js

import request from 'superagent';

export const bookmarkRequest = (method, id, csrf, data) => {
  console.log(data)
  const req = request[method](`/bookmarks/${id}`).set('X-CSRFToken', csrf);
  if (data) {
    req.send(data);
  }
  return req;
};