javascript - function is not called onChange of Checkbox -

i repeating object render ui. each row has itemname , checkbox. onclick of checkbox should id of row. when run page getting error msg => cannot read property 'addtocompare' of undefined

import react 'react';      export default class list extends react.component {          constructor(props) {             super(props);          }         addtocompare(event){               console.log('get id of row');             }         render() {           var planlist = [                           {id: 1, "itemname": "sunshine},                           {id: 2, "itemname": "global"},                           {id: 3, "itemname": "lifetime"}                           ];             return (                     <div id="layout-content" classname="layout-content-wrapper">                       {                         planlist.map(function(item, i) {                          return (                            <div classname="row" key={i}>                               <h1>                                <input type="checkbox" onchange={this.addtocompare.bind(this)} />{item.name}                               </h1>                            </div>                            )                          })                        }                      )     }     

use es6 syntax, map function refer this list as

planlist.map((item, i) =>{    return (          <div classname="row" key={i}>           <h1>            <input type="checkbox" onchange={this.addtocompare.bind(this)} />{item.name}           </h1>           </div>          )       }) 

or store this other variable , use addtocompare property stated @marco