JSFiddle - React, Tailwind, and code Playground

by Marlin Forbes

HTML

<script src="https://fb.me/react-0.13.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.2/immutable.min.js"></script>

JavaScript 1.7

import React from 'react';
import Immutable from 'immutable';
import Cursor from 'immutable/contrib/cursor';

let data = Immutable.fromJS({
  things: [
    {title: ''},
    {title: ''}
  ]
});

class Thing extends React.Component {
  shouldComponentUpdate(nextProps) {
    return this.props.thing.deref() !== nextProps.thing.deref();
  }

  handleChangeTitle(e) {
    this.props.thing.set('title', e.target.value);
  }    

  render() {
    return <div>
      <input value={this.props.thing.get('title')} 
        onChange={this.handleChangeTitle.bind(this)} />
    </div>;
  }
}

class Container extends React.Component {
  render() {
    const cursor = Cursor.from(this.props.data, 'things', newThings => {
      data.set('things', newThings);
      renderContainer();
    });

    const things = cursor.map(thing => <Thing thing={thing} />)

    return <div>
      {things}
    </div>;
  }
}

const renderContainer = () => {
  React.render(<Container data={data} />, document.getElementById('someDiv'));
};