CODEWITHSUNDEEP
react-native
rnn
rnn

Reputation: 2563

undefined is not a function(evaluating '_this2.AlertButton()')?

I create touchableopacity for every item in map. it works well but when I give function to TouchableOpacity like below, it gives me error which is on title. How can I fix this ?

it gives error when I write this.AlertButton()

{section.subcategory.map((item, key) => (        
          <View key={key} style={styles.item}>
            <TouchableOpacity
              onPress={() =>this.AlertButton()}>
            </TouchableOpacity>

            <View style={styles.separator} />
          </View>
        ))}

This is my alert function : 

AlertButton() {
     const number = 'TelNo';
  Alert.alert(
      '',
      'Test',
      [
        {text: 'NO'},
        {text: 'Yes', onPress: () => Linking.openURL(`tel:${number}`)},
      ],
    );
  }

Here is render. And my map function which is above is in renderContent

 render() {
      CONTENT2 =[];
    CONTENT2 = this.state.fromPage1;

    return (
      <View style={styles.container}>

      <View style={{height: this.state.yuksek, width: this.state.genis, justifyContent: 'center', alignItems: 'center',position:'absolute'}}>
        <Text style={{fontWeight: 'bold', color:'#856F6F'}}>Yukarıdaki menü butonlarına tıklayınız.</Text>
      </View>

      <View style={{height: this.state.yuksek2, width: this.state.genis2, justifyContent: 'center', alignItems: 'center'}}>
        <Text style={{fontWeight: 'bold', color:'#856F6F'}}>String</Text>
      </View>
        <ScrollView contentContainerStyle={{}}>
          <Accordion
            activeSections={this.state.activeSections}
            sections={CONTENT2}
            touchableComponent={TouchableOpacity}
            expandMultiple={false}
            renderHeader={this.renderHeader}

            renderContent={this.renderContent}
            duration={400}
            onChange={this.setSections}
          />
        </ScrollView>
        <View style={{height:85, width:85,position:'absolute',bottom:5,right:5}}>
        <TouchableOpacity style={{flex:1}} onPress={() => this.AlertButton()}>
            <ImageBackground source={require('../../image/phoneCall.png')} style={{flex:1}}>
            </ImageBackground>
        </TouchableOpacity>
        </View>
      </View>
    );
  }
}

Upvotes: 0

Views: 36

Answers (1)

Shridhar Sharma
Shridhar Sharma

Reputation: 2387

just change the following line

renderContent={this.renderContent}

to

renderContent={this.renderContent.bind(this)}

because when you are using the class method directly as callback then its not definitely bound to its class when called from inside the component

Upvotes: 1

Related Questions