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>

Kindly show the part where you pass the pickerId to this component from your parent — Hussain Nawaz Lalee
– Hussain Nawaz Lalee, Commented Apr 15, 2020 at 13:44

Hussain Nawaz Lalee · Accepted Answer · 2020-04-15 14:17:08Z

4

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

edited Apr 15, 2020 at 14:17

answered Apr 15, 2020 at 14:03

Hussain Nawaz Lalee

8966 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Jordan Over a year ago

As alway is the simple thing the get me! Thank you so much for the help!

Collectives™ on Stack Overflow

Cannot access props from function inside React Component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related