TypeError: TypeError: undefined is not an object (evaluating 'this.onPressDropdownData(this.data).bind')

Question

I want is to record my inputs involving checkbox selection, dropdown selection and everything else into an alert box. I am having trouble with capturing the dropdown selection and checkbox selection into a state and further placing all those inputted details into an alert box.

Below is the code:

import * as React from 'react';
import {
    Text, View, StyleSheet, TouchableOpacity, ScrollView, Button
}
from 'react-native';
import {
    Header, Icon
}
from 'react-native-elements';
import {
    Constants
}
from 'expo';
import {
    CheckBox
}
from 'react-native-elements';

import {
    createStackNavigator,
    createNavigatorContainer
}
from "react-navigation";

import {
    Dropdown
}
from 'react-native-material-dropdown';

export
default class UpdateFrequency extends React.Component {
    static navigationOptions = {
        title: 'UPDATE FREQUENCY',
        style: {
            display: 'flex',
            flexDirection: 'row',
            backgroundColor: "#FFD700"
        }
    };

    constructor(props) {
        super(props);
        // this.toggle= this.toggle.bind(this);
        this.state = {
            ischecked: true,
            data: '',
            time: 0
        }
    }
    onChangeCheck() {
        this.setState({
            ischecked: !this.state.ischecked
        });

    }
    onPressDropdownData(data) {
        this.setState({
            data: data
        });

    }

    onPressDropdownTime(time) {

        this.setState({
            time: time
        });
    }

    render()

    {

        const data = [{
            value: '3 Hours'
        }, {
            value: '6 Hours'
        }, {
            value: '12 Hours'
        }, {
            value: 'Daily'
        }];

        const time = [{
            value: '6 AM'
        }, {
            value: '00:00 HRS'
        }];

        return ( < View style = {
                styles.container
            } >

            < Text style = {
                styles.writeup
            } > Use this page to select how many updates you would like to receive at once. < /Text>

        <View style={StyleSheet.create({flex:1})}>


        <CheckBox style={styles.one}
            center
            title="Receive Simultaneously"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            checked={this.state.ischecked}
            value={this.state.ischecked}
            onPress={this.onChangeCheck.bind(this)}
          / >

            < Dropdown label = '# Updates to Receive'
            data = {
                data
            }
            onPress = {
                this.onPressDropdownData(this.data).bind(this)
            }
            />


        <Dropdown
        label='Delay Between Updates'
        data={time}
        onPress={this.onPressDropdownData(this.data).bind(this)}
        / >

            < TouchableOpacity style = {
                styles.adsense
            }
            onPress = {
                () = > {
                    alert('Receive simultaneously : ' + this.state.ischecked + '\n' + 'No. of updates to receive : ' + this.state.data + '\n' + 'Delay between updates : ' + this.state.time);
                }
            } > < Text > Show recorded inputs < /Text>
        </TouchableOpacity >

            < /View>

        <TouchableOpacity style={styles.adsense}>
        <Text>Adsense Ad</Text > < /TouchableOpacity>


      </View >
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        display: 'flex',
        flexDirection: 'column'
    },

    writeup: {
        flex: 0.3,
        backgroundColor: '#FFE4B5',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 8
    },
    adsense: {
        flex: 0.55,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#778899',
    },

});

Welcome to StackOverflow! Can you add stack-trace to your question? Help community to help you — Alex Yu
You wrote part of stack trace in title of your question: Type error: undefined .... Copy full text of stack trace and add it to text of your question — Alex Yu

Edwin Vargas Edwin Vargas · Accepted Answer · 2019-02-08T23:00:31

The error is that you cannot do this: this.onPressDropdownData(this.data).bind(this).

Before all, I recommend to you using arrow functions for creating class methods. The arrow functions avoid you to do an explicit bind.

For solving your problem:

If you want to pass extra parameters while binding, look this: Pass additional parameters to bind?.
If you want to access the data variable that you created in render, then you access only with the name of the variable, the reserved word this is for methods or properties that belongs to the class. I mean, only data, not this.data.

Links for read about the arrow functions:

TypeError: TypeError: undefined is not an object (evaluating 'this.onPressDropdownData(this.data).bind')

1 Answers