React JS rendering elements with on click function and passing index to on click function

Question

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!

Answer 1

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'/>