React Native : State value is evaluated as undefined

Question

In my Logitem component I have a Modal which is invoked upon clicking on a Text element.

This part is working fine and I am able to handle the click event successfully.

But for some reason within the event handler method deleteSelectedRecord(), the state value is returned as 'undefined' for this.state.selecteddate

I have marked the line where the evaluation happens as Line X

This is my code

import React, { Component } from 'react';
import { Text, View, Modal, DatePickerIOS, TextInput, Button } from 'react-native';
import {
  deleteSelectedRecordDB
} from '../src/helper';
import { Spinner } from '../src/Spinner';


export default class Logitem extends Component {

  constructor(props)  {
    super(props);
    const { logstringdate, bmi, weight, logdate } = this.props;

  }

state = {
    selecteddate: '1',
    selectedweight: this.props.weight,
    showmodal: false,
    date: new Date(86400000 * this.props.logdate),

  }

  async deleteSelectedRecord(){
     console.log('Delete clicked');
     console.log('this.state.selecteddate ==>' + this.state.selecteddate); //LINE X
     const result = await deleteSelectedRecordDB(this.props.logdate);
     console.log('deleteSelectedRecord after');
     console.log('result ==> '+ result);
     return result;

  }

  setModalVisible = (visible) => {
    this.setState({showmodal: visible});
  }

  onWeightClick = () => {
      this.setState({ selecteddate: this.props.logdate, showmodal: true }, () => {

        console.log('Value in props==>' + this.props.logdate);
        console.log('The selecteddate in the state ==> ' + this.state.selecteddate);
      });

    }

    onDateChange(date) {
        this.setState({
          date: date
        });
      }

render() {

  return (

    <View style={styles.containerStyle}>
    <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.showmodal}
          onRequestClose={() => {alert("Modal has been closed.")}}
          >
         <View style={{marginTop: 22}}>
                 <DatePickerIOS
                   date={this.state.date}
                   mode="date"
                   onDateChange={(date) => this.onDateChange(date)}
                   style={{ height: 100, width: 300 }}
                 />
        </View>
        <View style={{ marginTop: 22, borderColor: '#ddd', borderWidth: 5 }}>
                 <TextInput
                   returnKeyType="done"
                   keyboardType='numeric'
                   style={{
                     height: 40,
                     width: 60,
                     borderColor: 'gray',
                     borderWidth: 1,

                   }}
                   onChangeText={(text) => this.setState({ selectedweight: text })}
                   value={this.state.selectedweight.toString()}
                 />
                <Text>KG</Text>
                <Button
                    title="Delete"
                    onPress={this.deleteSelectedRecord}
                    style={{ marginTop: 200 }}
                />

         </View>

        </Modal>
              <View style={styles.headerContentStyle}>
                    <Text>{this.props.logstringdate}</Text>
                    <Text>{this.props.bmi}</Text>
              </View>
              <View style={styles.thumbnailContainerStyle}>
                    <Text onPress={this.onWeightClick}>{this.props.weight}</Text>
              </View>
    </View>
  );

}
};

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop:10,
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
    flexDirection: 'row'

  },
  headerContentStyle: {
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
};

This is my output

As can be seen from the console output the state value of selecteddate is not undefined.

Can someone take a look and let me know what is wrong with the code ?

Answer 1

Try this code in <Button> which invokes deleteSelectedRecord method:

            <Button
                title="Delete"
                onPress={this.deleteSelectedRecord.bind(this)}
                style={{ marginTop: 200 }}
            />

Answer 2

You need to bind deleteSelectedRecord to this somewhere in your constructor:

this.deleteSelectedRecord = this.deleteSelectedRecord.bind(this)