AndryName AndryName - 3 months ago 15
React JSX Question

ReactJS send key(index) on click

I want to send element's index on click in function. Because I should change data for every element and get it from array.

How can I get key in

MainBlock
from
List
? Is it possible? Or I do something wrong?

I'm very new in React and do many mistakes.

var MainBlock = React.createClass({
Click: function() {
// I need to get element KEY
// var data = array[key]
},
render: function() {
return (
<List Click={this.props.Click.bind(null, this)}>
);
}
});

var List = React.createClass({
render: function() {
var ItemNodes = this.props.data.map(function(step, index) {
return (
<Item className="class" Click={this.props.Click.bind(null, this)} key={index} />
);
}.bind(this));
return (
<ul>
{ItemNodes}
</ul>
);
}
});

var StepWindow = React.createClass({
render: function() {
return (
<li onClick={this.props.Click}>
yo!
</li>
);
}
});


Thank you for your help.

Answer

Try this:

Click={this.props.Click.bind(this, index)}

Click: function(idx, e){

}

check out the boundClick in the docs example http://facebook.github.io/react/tips/expose-component-functions.html

edit I've edited this to show that the parameters passed to the Click function are in the different order. It was e, idx and should be idx, e.

Comments