App.js

/** @jsx React.DOM */
var React = require('react');
var Store = require('./Store.js');
var actions = require('./actions.js');


var Cell = React.createClass({
    getInitialState: function () {
        console.log("Cell init")
        return {
            data: this.props.data,
        };
    },
    changeValue: function (event) {
        event.preventDefault();
        actions.changeCellValue(this.state.data, 0, 0);
    },
    updateNewValue: function (event) {
        this.setState({
            data: event.target.value
        });
    },
    render: function () {
        return (
            <div className="cell">
                <form onSubmit={this.changeValue}>
                    <input ref="newMessage" type="text" value={this.state.data} onChange={this.updateNewValue}/>
                </form>
            </div>
        )
    }
});

var Row = React.createClass({
    getInitialState: function () {
        return {
            cells: this.props.celldata,
        };
    },
    renderCell: function (cell) {
        return <Cell data={cell} />
    },
    render: function () {
        return (
            <div className="row">
                {this.state.cells.map(this.renderCell)}
            </div>
        )
    }
});

var App = React.createClass({
    getInitialState: function () {
        return {
            rows: Store.getRows(),
        };
    },
    componentWillMount: function () {
        Store.addChangeListener(this.changeState);
    },
    componentWillUnmount: function () {
        Store.removeChangeListener(this.changeState);
    },
    changeState: function () {
        this.setState({
            rows: Store.getRows()
        });
    },
    renderRow: function (row) {
        return <Row celldata={row} />
    },
    render: function() {
        return (
            <div>
                {this.state.rows.map(this.renderRow)}
            </div>
        );
    }
});
module.exports = App;