React native undefined is not a function

Question

I am new to react native. I am trying to push to another page. But i am getting error saying

Undefined is not a function(evaluating '_this2._goToProductListing('app.productListing'{title:item.title})')

My code is this

 _renderContent(section, i, isActive) {
        return (
            <View>
                <List>
                    {section.content.map((item, i) => {
                        return(
                            <ListItem containerStyle={styles.categoryLists}
                                      onPress={() => this._goToProductListing('app.productListing',{title:item.title})}
                                      key={i} title={item.title}
                            />
                        );
                    })}
                </List>
            </View>
        );
    }


    //Send to product list page
    _goToProductListing = (screen,data) => {
        this.props.navigator.push({
            screen: screen,
            title: data.title,
            passProps: {
                data: data
            }
        });
    };
render() {
        return (


            <View style={stylesheet.accrodianWraper}>

                <ScrollView>
                    <Accordion
                        activeSection={this.state.activeSection}
                        sections={CONTENT}
                        touchableComponent={TouchableOpacity}
                        renderHeader={this._renderHeader}
                        renderContent={this._renderContent}
                        duration={0}
                        onChange={this._setSection.bind(this)}
                    />
                </ScrollView>
            </View>
        )
    }

Can anyone please tell me where i am doing wrong?? And how can i fix it?

For navigation i am using wix react native navigation, And the page app.productListing is also registered in the index.js. And i am using react-native-collapsible for accordion, B

I guess you loose context here: `renderContent={this._renderContent}` — Jonas Wilms, May 20 '18 at 12:49
What you mean? The accordion content are getting displayed properly. Only when i click on the item to go to next page that error comes instead of pusing me to next page — user7747472, May 20 '18 at 12:52
@user7747472 - See the linked question's answers. Your `renderContent` is a method. `renderContent={this._renderContent}` just passes the function reference, without anything to indicate what `this` to use. The linked questions answers show you how to ensure the correct `this` is used. — T.J. Crowder, May 20 '18 at 12:59
@T.J.Crowder,Thank your very much TJ for that very useful link. I had no idea no idea about this one. Thank u again — user7747472, May 20 '18 at 13:01

score 3 · Accepted Answer · answered May 20 '18 at 12:52

3

Try making the _renderContent a property with an arrow function too:

_renderContent = (section, i, isActive) => {

answered May 20 '18 at 12:52

Tomasz Mularczyk

34,501
19
112
166

Thank you so much . This worked. I do not under why that => though – user7747472 May 20 '18 at 12:54
@user7747472 because in your example `_renderContent` is called within Accordion and Accordion doesn't have this method. Arrow function helps you avoid that by binding `this` to the context in which it is used. – Tomasz Mularczyk May 20 '18 at 12:57
1

This is an often-posted problem, with a solid dupetarget: https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function We don't need yet another answer to it. – T.J. Crowder May 20 '18 at 12:59

React native undefined is not a function

1 Answers1

Linked