CODEWITHSUNDEEP
reactjsreact-native
Ray
Ray

Reputation: 9684

this.<name> is not a function

This question was answered a lot but I have tried them all with no success. I tried binding the function but it still gives me this error:

_this3.toggleDrawer is not a function

Code:

class DrawerContent extends Component {
  toggleDrawer() {
    this.context.drawer.toggle()
  }
  _renderHeader(section) {
    if (section.content.length === 0) {
       var sectionID = section.title.match(/\d/g).join("")
       return(
         <View>
           <TouchableOpacity onPress={() => {
             NavigationActions.movie_grid({dataID: sectionID})
             this.toggleDrawer()
           }}>
             <Text style={{color: "#000", padding: 15}}>{section.title.replace(/[0-9]|,/g, '')}</Text>
           </TouchableOpacity>
         </View>
       )
    } else {
      return(
        <View>
          <Text style={{color: "#000", padding: 15}}>{section.title.replace(/[0-9]|,/g, '')}</Text>
        </View>
      )
    }
  }
}

Upvotes: 0

Views: 71

Answers (2)

Joseph Roque
Joseph Roque

Reputation: 5166

You haven't included all of your code here, but my guess is you aren't binding _renderHeader(). I assume this is being used in a ListView, so it should look something like this:

<ListView
    renderHeader={this._renderHeader.bind(this)}
    ... />

That binds this within _renderHeader, which can then further bind this properly in your other functions.

Upvotes: 1

Perry Mitchell
Perry Mitchell

Reputation: 694

React callbacks on elements need to be bound for this to work.

Try adding the following function to your class:

onOpacityClick() {
    NavigationActions.movie_grid({dataID: sectionID});
    this.toggleDrawer();
}

Try replacing your first return to this:

   return(
     <View>
       <TouchableOpacity onPress={this.onOpacityClick.bind(this)}>
         <Text style={{color: "#000", padding: 15}}>{section.title.replace(/[0-9]|,/g, '')}</Text>
       </TouchableOpacity>
     </View>
   )

Upvotes: 0

Related Questions