Raymond Raymond - 22 days ago 6
React JSX Question

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>
)
}
}
}

Answer

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.