javascript - Access a function through onPress inside a map function -

a sugested solution problem posted below:

in current project want able loop through data , present them items. each item should highlighted when pressed , items should stored in array posted later on. problem occurs when try map through data. think problem related arrow function , 'this' not contain function 'onpress' while inside the

import react, { component } 'react'; import {stylesheet,view,text,button,touchablehighlight} 'react-native'; var data= [{     "description": "first",     "id": 1, }, {     "description": "second",     "id": 2, }, {     "description": "third",     "id": 3, },]  export default class mapfunction extends component {   constructor(props) {     console.log('init')     super(props);     this.state = {         checked:[],     }   }   //when object pressed should added/removed checked list.   onpress(id){     var checked = this.state.checked.slice()     if (checked.includes(id)){         var = checked.indexof(id);         if(i != -1) {             checked.splice(i, 1);         }     }     else{         checked.push(id)     }     this.setstate({ checked: checked })     console.log(checked)   }   render() {     var items = data;     var content=items.map(function(item){     return (         <mybutton key={item.id} title={"in map "+item.id} onpress={() => {this.onpress(item.id) }}/>     )   }   )  return (     <view style={styles.container}>         {content}         <mybutton title="not in map 1" onpress={() => {this.onpress(items[0].id) }}/>         <mybutton title="not in map 2" onpress={() => {this.onpress(items[1].id) }}/>         <mybutton title="not in map 3" onpress={() => {this.onpress(items[2].id) }}/>         <view>         <text>tapped: {this.state.checked}</text>         </view>     </view>      )   }   }   class mybutton extends component{   constructor(props) {     super(props);     this.state = {         flag:false     };   }   //ontap switch backgroundcolor   ontap(){     this.setstate({         flag: !this.state.flag     })   }   render(){     return(         <touchablehighlight             onpress={                 () => {                     this.props.onpress(); //used check , uncheck items.                     this.ontap();//used change background                  }             }             underlaycolor='green'             style={[styles.touch,this.state.flag && styles.touchactive]}>             <text style={styles.title}>                 {this.props.title}             </text>         </touchablehighlight>     )   }   } const styles = stylesheet.create({   container:{     paddingvertical: 18,     flex:1,     backgroundcolor:'#2c3e50',   },    touch:{     flexdirection:'row',     backgroundcolor:'blue',     margin:30,     margintop:5,   },   touchactive:{     backgroundcolor:"red",    },   title:{     fontweight:"700",     fontsize: 24,     color:'#000000',   },   owner:{     fontweight:"200",   } }); 

solution problem when calling function map function changed. 1 can pass current map function explained the answere on question. updated code removing

var content=items.map(function(item){     return (         <mybutton key={item.id} title={"in map "+item.id} onpress={() => {this.onpress(item.id) }}/>     ) } 

and remove

{content} 

above mybutton items

instead used method described in link above pass map function.

my full view became

        <view style={styles.container}>         {             items.map(function(item){return (                 <mybutton key={item.id} title={"in map "+item.id} onpress={() => {this.onpress(item.id) }}/>             )},this)         }          {/*{content}*/}         <mybutton title="not in map 1" onpress={() => {this.onpress(items[0].id) }}/>         <mybutton title="not in map 2" onpress={() => {this.onpress(items[1].id) }}/>         <mybutton title="not in map 3" onpress={() => {this.onpress(items[2].id) }}/>         <view>         <text>tapped: {this.state.checked}</text>         </view>     </view>