Cursors example

gistfile1.js

var React = require('react');
var Immutable = require('immutable-with-cursors');

var mainComponent = React.createClass({
    getInitialState: function() {
        return this.props;
    },
    render: function() {
        return React.DOM.ul(
            null,
            this.state.data.get('elements').map(function(element, index) {
                var cursor = this.state.data.cursor(['elements', index], function(updated) {
                    this.setState({'data': updated});
                }.bind(this));
                return detailComponent({data: cursor});
            }.bind(this)).toArray()
        );
    }
});


var detailComponent = React.createClass({
    handleClick: function() {
        this.props.data.update('count', function(v) { return v + 1; });
    },
    render: function() {
        return React.DOM.li(
            null,
            React.DOM.span(null, this.props.data.get('title')),
            React.DOM.button(
                { onClick: this.handleClick },
                'Click me!'
            ),
            this.props.data.get('count')
        );
    }
});

var data = Immutable.fromJS({
    elements: [
        {
            title: 'Element one',
            count: 0
        },
        {
            title: 'Element two',
            count: 0
        },
        {
            title: 'Element three',
            count: 0
        }
    ]
});

React.renderComponent(mainComponent({data: data}), document.getElementById('main'));