React Native, TypeError: undefined is not an object When I am using onPress function

Question

I am trying to call the onPress of the touchableopacity for like_click() but it is giving me an error (Undefined is not an object).

I tried to call the method with this also but it is also giving me an error (can't find variable like_click)

constructor(props){
        super(props)
        this.logout = this.logout.bind(this);
        this.state = {
            username:"",
            password:"",
            token:"",
            firstName:"",
            dataSource:""
        }
        **this.like_click = this.like_click.bind(this);**
        this.dislike_click = this.dislike_click.bind(this);
        this.workjoyPage = this.workjoyPage.bind(this);
    }

---

**like_click(expr_id){
        console.log(this.state.token);
        console.log(expr_id);
        var headers = new Headers();
        let auth ='Bearer '+this.state.token;
        headers.append("Authorization",auth);        
        fetch("http://diwo.nu/public/api/addExpLikes/"+expr_id, {
            method: 'GET',        
            headers: headers,
        })
        .then((response) => response.json())
        .then((responseJson) => {
            if(responseJson.status==200){
                console.log(responseJson);
                this.componentDidMount();
            }
        }).catch((error) =>{
            console.error(error);
        });
    }**

---

 _renderItem ({item, index}) {
        var {height, width} = Dimensions.get('window');
        return (
            <View style={styles.dynamic_list_view}>                    
                <Card borderRadius={15} containerStyle={{marginLeft:12,backgroundColor:'#00a1ff'}}>
                    <View style={{paddingRight:10}}>
                            {item.user_likes==0?
**<TouchableOpacity onPress={()=>this.like_click(item.id)}>
    <Image style={{width:20, height:20,marginTop:10,marginRight:5}} source={require('../../uploads/heart1.png')} />
</TouchableOpacity>**
:
<TouchableOpacity onPress={()=>dislike_click(item.id)}>

</TouchableOpacity>}                           
                    </View>
                </Card>
            </View>
        );
    }
    render() {

            <View style={{flex:2.2}}>
                <Carousel
                    ref={(c) => { this._carousel = c; }}
                    data={this.state.dataSource}
                    **renderItem={this._renderItem}**
                    sliderWidth={350}
                    itemWidth={350}
                    autoplay={true}
                    autoplayDelay={2000}
                    loop={true}
                />
            </View>
        }

How should I call by the function when clicking on the image. Please help.

Answer 1

try using es6 fat arrow functions as it makes code easier , so you dont have to explicitly bind this.

like_click = (expr_id) =>{
        console.log(this.state.token);
        console.log(expr_id);
        var headers = new Headers();
        let auth ='Bearer '+this.state.token;
        headers.append("Authorization",auth);        
        fetch("http://diwo.nu/public/api/addExpLikes/"+expr_id, {
            method: 'GET',        
            headers: headers,
        })
        .then((response) => response.json())
        .then((responseJson) => {
            if(responseJson.status==200){
                console.log(responseJson);
                this.componentDidMount();
            }
        }).catch((error) =>{
            console.error(error);
        });
    }**

and in your touchable opacity call like

<TouchableOpacity onPress={()=>this.like_click(item.id)}>

AFter this in like_click you can try console.log to check whether the function is called. And if it's called, that means there is an error inside your like_click func API call. DO check it out.