higher-order-component.js

const NotificationHoC = function(Component) {
  return React.createClass({
    componentDidMount() {
      const success = (notifications) => {
        this.setState({
          notifications: notifications,
        });
      };

      $.ajax({
        url: '/notifications',
        dataType: 'json',
        success: success,
      });
    },

    onMarkAsRead(id) {
      // some mark as read logic
    },
    
    render() {
      return (
        <Component
          notifications={this.state.notifications}
          onMarkAsRead={this.onMarkAsRead}
        />
      );
    },
  });
}

const Notifications = NotificationHoC(React.createClass({
  renderNotification({notification}) {
    const { id, date, message } = notification;

    return (
      <div>
        <span>{message} — {date}</span>
        <button onClick={this.props.onMarkAsRead.bind(null, id)}>Mark as Read</button>
      </div>
    );
  },

  render() {
    return <div>{this.props.notifications.map(renderNotification)}</div>;
  },
}));

const App = React.createClass({
  render() {
    return <Notifications />
  },
});