React-native-collapsible: onPress inside renderHeader and renderContent throws an error

[mykelaballe]

RN: 0.32
react-native-collapsible: 0.7.0

I have TouchableOpacity inside my renderHeader and renderContent which has an onPress. But when clicking it, it throws an error.

[AmalinaMakhtar]

@mykelaballe did you manage to solve it? im stuck in the same situation.

[Lorezz]

same problem here

[oblador]

@mykelaballe Have you tried upgrading your version of React Native?

[barbarossusuz]

same here for this issue, any fix?

[iRoachie]

@barbarossusuz This problem still occurs?

[jeanverster]

@iRoachie I can confirm this problem is still happening.

RN: 0.45.1

Here's my code:

_renderContent (section) {
    if (section.children.length !== 0) {
      return section.children.map((store, index) => {
        return (
          <TouchableHighlight onPress={() => this._handlePress(store)} key={index} style={styles.storeRow}>
            <Text style={styles.storeText}>{store.name.toUpperCase()}</Text>
          </TouchableHighlight>
        )
      })
    } else {
      return section.store.map((store, index) => {
        return (
          <TouchableHighlight onPress={() => { }} key={index} style={styles.storeRow}>
            <Text style={styles.storeText}>{store.name.toUpperCase()}</Text>
          </TouchableHighlight>
        )
      })
    }
  }

Then handlePress:

_handlePress = (store) => {
    this.props.navigation.navigate('StoreDetailScreen', {store})
  }

I get "this.handlePress is not a function"

Any ideas as to how to solve this??

[rdoyle975]

@jeanverster I don't know if it's the right way to fix this but I got the same problem and I made it work by inserting my function inside _renderContent (or _renderHeader). So it would look like this:

_handlePress = (store) => {
    this.props.navigation.navigate('StoreDetailScreen', {store})
  }

_renderContent (section) {
    if (section.children.length !== 0) {
      return section.children.map((store, index) => {
        return (
          <TouchableHighlight onPress={() => _handlePress(store)} key={index} style={styles.storeRow}>
            <Text style={styles.storeText}>{store.name.toUpperCase()}</Text>
          </TouchableHighlight>
        )
      })
    } else {
      return section.store.map((store, index) => {
        return (
          <TouchableHighlight onPress={() => { }} key={index} style={styles.storeRow}>
            <Text style={styles.storeText}>{store.name.toUpperCase()}</Text>
          </TouchableHighlight>
        )
      })
    }
  }

[ashusdn]

HelloTeam,

I am facing the same issue when I try to onPress method inside _renderHeader it will show function not defined.

_renderHeader(section, i, isActive) {
    return (
         <View style={styles.headerRowStyle}>
                <Image style={styles.carretImageStyle} source={isActive ? caretDown : caret} />
                <Text style={styles.headerText}>{section.title}</Text>
              <TouchableOpacity  onPress={() => onUnitItemClick(section.title)}   underlayColor="transparent">
                    <Image source={arrow} />
                </TouchableOpacity>
            </View>
  );
}

Can you please provide some solution regarding this.

[jas823]

I encountered this problem also. I tried the solution given by @rdoyle975, it still didn't work, but it was close, the idea of "inserting the function inside.." was the clue. So thanks :) I figured that the problem was due to the Component's instance aren't passed to the function inside the Accordion and thus showing the undefined error. The key of the solution is to place _renderContent function inside the render() function in order to have access to "this". The following is what I ended up with (you'll need to remove the comments in the return part to make it work):

```
onChangeScreen(screen, section) {
const { navigation } = this.props;
navigation.navigate(screen, { data: section });
}

render() {
_renderContent = section => {
return (

Details


);
};

 return (
  <ScrollView style={styles.container}>
    <KeyboardAvoidingView behavior="position">
      <Accordion
        sections={dataList}
        renderHeader={this._renderHeader} //_renderHeader is outside of render() and has no access to "this"
        renderContent={_renderContent} //this function call is what works for me
        easing="easeOutCubic"
      />
    </KeyboardAvoidingView>
  </ScrollView>
);

}
````

[copilots-app]

You need to bind this to the function by eg. use ES6 lambda functions

_renderContent = (section) => { ... }

instead of

_renderContent(section) { ... }

that should do the trick

[iRoachie]

Closing this as solved, as it really isn't with the library. Be sure to use an arrow function on the renderContent and renderHeader methods to preserve access to the class scope

[sohanpatil44]

Call a function on onPress of TouchableOpacity inside renderheader function of react-native-accordion
shwing error:undefined is not a function

[AfanasievN]

@jas823 thanks! it worked!

[arunachalalam]

Thanks a ton Swapkids You need to bind this to the function by eg. use ES6 lambda functions

_renderContent = (section) => { ... }

instead of

_renderContent(section) { ... }

helped me