Notification.jsx

import React, { Component } from 'react';

class Notification extends Component {
	render() {
		var type = this.props.type == null ? 'default' : this.props.type;
		return <div className={"notification " + type}>{this.props.message}{this.props.cancellable == 1 && <i className="material-icons" onClick={this.props.onCancel}>&#xE5CD;</i>}</div>;
	}
}

export default Notification;

NotificationList.jsx

import React, { Component } from 'react';
import Notification from './Notification';

class NotificationList extends Component {
    render() {
        var notifications = this.props.notifications.map(function(notification){
            return (<Notification 
                        key={notification.ID} 
                        message={notification.Message} 
                        type={notification.Type} 
                        cancellable={notification.Cancellable} 
                        endDate={notification.EndDate} 
                        onCancel={this.props.onCancel.bind(null, notification.ID)}
                    />);
        });
        return (
            <div className="notifications">
                <div className="subtitle">Notifications</div>
                <div className="content">
                    {notifications}
                </div>
            </div>
        )
    }
}

export default NotificationList;

NotificationListContainer.jsx

import React, { Component } from 'react';
import NotificationList from './NotificationList';

class NotificationListContainer extends Component {
    constructor() {
        super();
        this.state = { data: [] }
    }

    componentDidMount() {
        // This is for testing purposes, in my actual code it fetches the API endpoint.
        this.setState({data: [
            {
            "ID": 1,
            "Message": "Make sure to eat your vegetables",
            "Type": null,
            "Cancellable": 0,
            "StartDate": "",
            "EndDate": ""
            },
            {
            "ID": 2,
            "Message": "Do not use gasoline as carpet cleaner",
            "Type": null,
            "Cancellable": 1,
            "StartDate": "",
            "EndDate": ""
            }
        ]})
    }
	
    handleCancelNotification(notificationId) {
	this.setState({ data: [...]}); // TODO: Finish
    }

	render() {
		return (
            <NotificationList notifications={this.state.data} onCancel={this.handleCancel.bind(this)} />
		)
	}
}

export default NotificationListContainer;