treta react

gistfile1.js

var socket = io.connect('http://' + document.domain + ':' + location.port + '/profile');

var CommentList = React.createClass({
  render: function() {
  	var data = this.props.data;

  	var foo = data.map(function(row){
  		console.log(row)
  		return <tr data-reactid={row.id}>
				<td>{row.place}</td>
				<td>{row.time}</td>
			</tr>
  	})
  	console.log(foo.length)
    return <tr>{foo}</tr>;
  }
});

var CommentBox = React.createClass({
  getInitialState: function() {
    return {
    	data: [
	    	{
	    		id: "f24bb074-f9aa-454b-897c-f9f1d9e3b351",
			    place: "Conference Room - Clayton Utz - Level 24",
			    time: "9:30 AM"
			},
			{
				id: "f24bb074-f9aa-454b-897c-f9f1d9e3b352",
			    place: "Clayton Utz Entrance- Level 24",
			    time: "9:12 AM"
			},
			{
				id: "f24bb074-f9aa-454b-897c-f9f1d9e3b354",
			    place: "Clayton Utz Entrance- Level 24",
			    time: "9:12 AM"
			},
			{
				id: "f24bb074-f9aa-454b-897c-f9f1d9e3b355",
			    place: "Elevator B",
			    time: "9:11 AM"
			},
			{
				id: "f24bb074-f9aa-454b-897c-f9f1d9e3b356",
			    place: "Elevator Bank - Right Side",
			    time: "9:10 AM"
			},
			{
				id: "f24bb074-f9aa-454b-897c-f9f1d9e3b357",
			    place: "E-Gate 1",
			    time: "9:09 AM"
			},
			{
				id: "f24bb074-f9aa-454b-897c-f9f1d9e3b358",
			    place: "Janus Cafe",
			    time: "9:03 AM"
			},
			{
				id: "f24bb074-f9aa-454b-897c-f9f1d9e3b359",
			    place: "Front Entrance",
			    time: "9:01 AM"
			}
		]
	};
  },
  componentDidMount: function() {
  	var that = this

	socket.on('profile', function(msg) {
		console.log(msg.data)
		that.setState({ data: msg.data });
	});
  },
  render: function() {
	var auxArr = this.getInitialState().data;

	if(!Array.isArray(this.state.data)){
		auxArr.push(this.state.data)
	}

    return (
        <CommentList data={auxArr} />
    );
  }
});

React.render(
	<CommentBox />,
	document.getElementById('live-places')
);