AndryName AndryName - 1 year ago 154
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download