JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var MyTable = React.createClass({
    getInitialState: function() {
        return {records: this.props.records};
    },
    
    onDelete: function(record) {
        if (confirm('Are you sure you want to delete ' + record.name)) {
            // Send a message to the server saying that record.id has been deleted
            var index = this.state.records.indexOf(record);
            this.state.records.splice(index, 1);
            this.forceUpdate();
        }
    },

    render: function() {
        return (
            <table>
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Job</td>
                    </tr>
                </thead>
                <tbody>
                    {this.state.records.map(function(record) {
                        return (
                            <tr>
                                <td>{record.name}</td>                    
                                <td>{record.job}</td>
                                <td onClick={this.onDelete.bind(this, record)}>Delete</td>
                            </tr>
                        );
                    }.bind(this))}
                </tbody>
            </table>
        );
    }
});
 
var records = [
  {id: 10, name: 'vjeux', job: 'Facebook'},
  {id: 14, name: 'blib', job: 'Unknown'}
];

React.renderComponent(<MyTable records={records} />, document.body);