I am trying to render React components using loop, Basically its link tag having on click function with value.
<p><a href="#" key={i} onClick={() => this.decreaseCount(i)} >delete</a></p>
where i is the index of the for loop. The problem is, instead of getting i's value inside this.decreaseCount(i) I am getting length of array. However I am getting correct index with key={i}
Need help!
That should work, try to use this (another way):
<p><a href="#" key={i} onClick={this.decreaseCount.bind(this,i)} >delete</a></p>
Check this example, you way will also work:
class App extends React.Component{
a(i){
console.log(i);
}
render(){
return (
<div>
{
[1,2,3].map(i => <p onClick={ () => this.a(i)} > {i} </p>)
}
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>
