Sample react component for listing announcements

AnnouncementList.js

// AnnouncementList
// <AnnouncementList/>

import React from 'react';
import marked from 'marked';

var AnnouncementsList = React.createClass({

    renderAnnouncement : function(key) {
        // var linkState = this.props.linkState;
        var announcement = this.props.announcements[key];

        return (
            <div key={key} className="panel panel-default">
                <div className="panel-body">

                    <span className="text-right announcement_fix">
                        {/*ADMIN ANNOUNCEMENTS MENU*/}
                    </span>
                    <h3>{announcement.title}</h3>
                    <span className="label label-info">
                        {announcement.created_at}
                    </span>
                    <hr/>
                    {marked(announcement.details)}
                    {/*{<span dangerouslySetInnerHTML={{__html: marked(announcement.details)}} />}*/}
                </div>

                <div className="panel-footer">
                    <span className="label label-info">
                        Updated {announcement.updated_at} . by Firstname Lastname
                    </span>
                </div>
            </div>
        )
    },

    render : function() {
        var announcementIds = Object.keys(this.props.announcements);

        return (
            <div id="announcement_list">
                {announcementIds.map(this.renderAnnouncement)}

            </div>
        )
    }
});

export default AnnouncementsList;