var AuthCalc = React.createClass({

    getInitialState: function() {

        return {

            "param": [

                {"key": "action", "value": "create"}

            ]

        };

    },

    handleChange: function(e) {

        var data = e.target.dataset;

        this.state.param[data.sn][data.key] = e.target.value;

        this.setState(this.state);

        data = null;

    },

    handleRemove: function(e) {

        var sn = e.target.dataset.sn;

        this.state.param.splice(sn, 1);

        this.setState(this.state);

    },

    handleNew: function(e) {

        this.state.param.push({"key": "", "value": ""});

        this.setState(this.state);

    },

    render: function() {

        var obj = {};

        var afterJsonEncode;

        var afterUrlEncode;

        var _auth;

        var params = this.state.param.map(function(o, key) {

            if (o.key !== '_DEBUG_' && o.key !== '_auth' && o.key !== '') {

                obj[o.key] = o.value;

            }

            return (

                <tr key={key}>

                    <td>

                        <input type='text' value={o.key} onChange={this.handleChange} data-sn={key} data-key='key'/>

                    </td>

                    <td>

                        <input type='text' value={o.value} onChange={this.handleChange} data-sn={key} data-key='value'/>

                    </td>

                    <td>

                        <button type='button' onClick={this.handleRemove} data-sn={key}>Remove</button>

                    </td>

                </tr>

            );

        }.bind(this));

        afterJsonEncode = JSON.stringify(obj);

        afterUrlEncode = encodeURIComponent(afterJsonEncode);

        _auth = md5(afterUrlEncode);

​

        return (

            <div>

                <h1>Auth Calcular <button type='button' onClick={this.handleNew}>Add Param</button></h1>

                <table>

                    <thead>

                        <tr>

                            <th>Key</th>

                            <th>Value</th>

                            <th>Action</th>

                        </tr>

                    </thead>

                    <tfoot>

                        <tr>

                            <td colSpan='3'><strong>JSON Encode:</strong><br/>{afterJsonEncode}</td>

                        </tr>

                        <tr>

                            <td colSpan='3'><strong>Url Encode:</strong><br/>{afterUrlEncode}</td>

                        </tr>

                        <tr>

                            <td colSpan='3'><strong>_auth:</strong><br/>{_auth}</td>

                        </tr>

                    </tfoot>

                    <tbody>

                        {params}

                    </tbody>

                </table>

            </div>

        );

    }

​

});

​

React.render(<AuthCalc/>, document.body);