i using react native nativebase components, , having problem calling _dostuff function. tried call
onpress={this._dostuff.bind(this)}
but keep receiving
cannot read 'dostuff' of undefined
_dostuff(){ console.log('hi'); } _getlist() { return this.state.listdata.map(function(data, i){ return( <view key={i}> <listitem style={styles.listitemcontain}> <button transparent onpress={this._dostuff.bind(this)}> <view> <thumbnail source={{uri: data.icon}} style={styles.thumbnailstyle}/> <text style={styles.title}>{data.name}</text> <text note style={styles.text}>{data.vicinity}</text> </view> </button> </listitem> </view> ); });
this
context lost inside .map loop. if using es6, try use fat arrow functions shown below.
_getlist() { return this.state.listdata.map((data, i) => { return( <view key={i}> <listitem style={styles.listitemcontain}> <button transparent onpress={this._dostuff.bind(this)}> <view> <thumbnail source={{uri: data.icon}} style={styles.thumbnailstyle}/> <text style={styles.title}>{data.name}</text> <text note style={styles.text}>{data.vicinity}</text> </view> </button> </listitem> </view> ); });
if cant use es6 on project due various reasons use alternative approach(old school) shown below...
_getlist() { return this.state.listdata.map(function(data, i){ var = this; return( <view key={i}> <listitem style={styles.listitemcontain}> <button transparent onpress={that._dostuff.bind(that)}> <view> <thumbnail source={{uri: data.icon}} style={styles.thumbnailstyle}/> <text style={styles.title}>{data.name}</text> <text note style={styles.text}>{data.vicinity}</text> </view> </button> </listitem> </view> ); });
Comments
Post a Comment