Cannot access props from function inside React Component

Question

I am trying to build a reminder app( not as simple as I thought!).

My time picker component is used in a few places so i was trying to send it an id to use as the key value. This id I am setting as a prop in the parent.

My question is how do i get this in to the async function to use as the key value?

Here is the code....

export default class Picker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDateTimePickerVisible: false,
      isDarkModeEnabled: false,
      chosenTime: "00:00",
    };
  }

  showDateTimePicker = (date) => {
    // this.isDark();
    this.setState({ isDateTimePickerVisible: true });
    // PushNotifactions();
  };

  hideDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: false });
  };

  setTime = (time) => {
    this.setState({ chosenTime: time });
  };

  async handleDatePicked(time) {
    try {
      let timePicked = moment(time, "hmm").format("HH:mm");
      await AsyncStorage.setItem(this.props.pickerId, timePicked);
      console.log("handle date picked");
      this.setTime(timePicked);
      console.log(this.state.chosenTime);

      this.hideDateTimePicker();
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    return (
      <View>
        <TouchableOpacity
          style={{
            backgroundColor: this.props.pickerColor,
            width: 80,
            height: 50,
            padding: 5,
            justifyContent: "center",
            borderRadius: 15,
          }}
          onPress={this.showDateTimePicker}
        >
          <Text style={styles.btnText}>{this.state.chosenTime}</Text>
          {/* {console.log(newTime)} */}
        </TouchableOpacity>
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this.handleDatePicked}
          onCancel={this.hideDateTimePicker}
          mode={"time"}
          titleIOS={""}
          isDarkModeEnabled={this.state.isDarkModeEnabled}
          input={true}
        />
        <TimerNotification />
      </View>
    );
  }
}

And here is the parent component.

<View style={styles.morningSelector}>
            <OptionsDT
              optionText={"Morning reminder"}
              switchColor={"#f6c532"}
              style={{ width: "100%" }}
              pickerColor={"#f6c532"}
              start={"00:00"}
              end={"12:00"}
              pickerId={"morningReminder"}
            />
          </View>
          <View style={styles.eveningSelector}>
            <OptionsDT
              optionText={"Evening reminder"}
              switchColor={"#f6c532"}
              style={{ width: "100%" }}
              pickerColor={"#f6c532"}
              start={"12:00"}
              end={"00:00"}
              pickerId={"eveningReminder"}
            />
          </View>

Answer 1

You need to bind handleDatePicked function to your component or convert it to an arrow function.

Solution 1 - Inside your construtor bind the function:

constructor(props) {
    super(props);
    this.handleDatePicked.bind(this)
}

Solution 2 - Convert your function to an arrow function :

handleDatePicked = async () => {
    //your function code..
}

Read more about binding functions to components here