Binding Index to onClick

by Muthuraman B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="app"></div>

React

var CC = React.createClass({

    handleClick: function(i, event) {
				alert(i);
    },

    render: function() {
        var s = {
            border: '1px solid #ddd',
            display: 'block',
            padding: '10px'
        };
        var items = this.props.arr.map(function(a, i) {
            return (
                <li key={i} onClick={this.handleClick.bind(this, i)} style={s}>
                    <img src="images/joy.png"/>
                </li>
                );
        }, this);

        return (
            <ul >
                {items}
            </ul>
            );
    }
});


var App = React.createClass({
    getInitialState: function () {
        return {
            arr: [1,2,3]
        };
    },

    render: function() {
        return (
            <div>
                <CC arr={this.state.arr}/>
            </div>
        );
    }
});

ReactDOM.render(<App/>, document.getElementById('app'));