function call is returning last key for every call in react js inside map function

Question

var events={111:{event:'test1'},222:{event:'test2'}}

for (var key in events){
if (events.hasOwnProperty(key)) {

<button type="button" value={key} onClick={()=>{self.removeEvent(key)}}>                                                                     <i className="material-icons">close</i>                                                                 </button>

}
}


removeEvent(key){
console.log(key)
}`

Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Kodanda Rama Durgarao poluri, Feb 12 '18 at 04:26

score 1 · Accepted Answer · answered Feb 12 '18 at 04:19

Your problem is with context inside of the loop.

Change var to let to fix it:

for (let key in events){
  if (events.hasOwnProperty(key)) {

    <button type="button" value={key} onClick={()=>{self.removeEvent(key)}}>                                                                     
      <i className="material-icons">close</i>                                                                 
    </button>

  }
}

More information here.

score 0 · Answer 2 · answered Feb 12 '18 at 06:56

You should try to write it like below

Object.keys(events).map( key => (
    events.hasOwnProperty(key) ? 
        <button type="button" value={key} onClick={()=>
            {self.removeEvent(key)}}>                                                                     
            <i className="material-icons">close</i>
        </button> : null                                                                        

)

function call is returning last key for every call in react js inside map function

2 Answers2