Unhandled JS Exception: TyperError: undefined is not an object (evaluating '_this.onPress.bind')

Question

I'm trying to make a button in React Native using TouchableOpacity's onPress. I got it working before, but now that I added some extra functionality in the function 'like', it does not work anymore.

The onPress should give an argument with the function.

I get the Error Unhandled JS Exception: TyperError: undefined is not an object (evaluating '_this.onPress.bind') in my iOS simulator.

My code:

 export default class App extends Component { constructor(props) { super(props) this.state = { liked: [false, false, false] } this.onPress = this.onPress.bind(this) } like = (id) => { const liked = this.state.liked liked[id] = !liked[id] this.setState({ liked: [!this.state.liked[0], false, false ], }); } render() { return ( <Swiper style={SliderStyles.wrapper} showsButtons={false}> <View style={SliderStyles.slide1}> <View style={CardStyles.card}> <View style={CardStyles.card_img} > <Image source={require('./recources/ny.jpg')} style={CardStyles.images}/> </View> <View style={CardStyles.card_details}> <Text style={TextStyles.card_title} >New York</Text> <View style={CardStyles.card_action}> <TouchableOpacity style={CardStyles.card_button} onPress={() => this.like(0)}> <Image source={ this.state.liked[0] === true ? require('./recources/icons/heart_closed.png') : require('./recources/icons/heart_open.png') } style={CardStyles.card_button_img}/> </TouchableOpacity> </View> <Text style={TextStyles.card_name}>Seppe De Langhe</Text> </View> </View> </View> </View> </Swiper> ); } } 

Picture of what my iOS simulator looks like

Thanks for the help!

Answer 1

Looks like you don't have an onPress method to bind, your method is called like and because you're using an arrow function it's already bound.

 export default class App extends Component { state = { liked: [false, false, false], }; like = (id) => { this.setState(state => { state.liked[id] = !state.liked[id]; return state; }); } render() { return ( <Swiper style={SliderStyles.wrapper} showsButtons={false}> <View style={SliderStyles.slide1}> <View style={CardStyles.card}> <View style={CardStyles.card_img} > <Image source={require('./recources/ny.jpg')} style={CardStyles.images}/> </View> <View style={CardStyles.card_details}> <Text style={TextStyles.card_title} >New York</Text> <View style={CardStyles.card_action}> <TouchableOpacity style={CardStyles.card_button} onPress={() => this.like(0)}> <Image source={ this.state.liked[0] === true ? require('./recources/icons/heart_closed.png') : require('./recources/icons/heart_open.png') } style={CardStyles.card_button_img}/> </TouchableOpacity> </View> <Text style={TextStyles.card_name}>Seppe De Langhe</Text> </View> </View> </View> </View> </Swiper> ); } }