How do I disable touchableOpacity?

Question

I am making an appointment app, I have 6 time slots on a given day. The selected slots are stored into a const called "notAvailableSlots" as soon as the component loads. How do I disable the touchableOpacity if "notAvailableSlots" has corresponding values in it, meaning someone has clicked one of the 6 slots already? I know it takes a boolean, but stuck thinking what value to pass...

    const availableHours = {
  timeSlots: {
    slot1: "2:00pm to 2:30pm",
    slot2: "2:30pm to 3:00pm",
    slot3: "3:00pm to 3:30pm",
    slot4: "3:30pm to 4:00pm",
    slot5: "4:00pm to 4:30pm",
    slot6: "4:30pm to 5:00pm"
  }
};

class Appointment extends Component {
  constructor(props) {
    super(props);

    this.state = {
      datePicker: false,
      date: new Date()
    };
  }
  componentDidMount() {
    this.props.fetchDataFromHeroku();
  }

  render() {
    const availability = availableHours.timeSlots;
    const notAvailableSlots = this.props.date
      .filter(date => {
        const month = new Date(date.date).getMonth();
        const day = new Date(date.date).getDate();
        const year = new Date(date.date).getFullYear();
        return (
          month === this.state.date.getMonth() &&
          day === this.state.date.getDate() &&
          year === this.state.date.getFullYear()
        );
      })
      .map(date => date.time_slot);
    // console.log(this.state.date);
    console.log("not available: ", notAvailableSlots);
    return (
      <View style={styles.container}>
        <Text style={{ backgroundColor: "#00CED1", height: 35 }}>
          Hi! Please click on "calendar" to setup an appointment
        </Text>

        <View>
          <Button
            style={styles.buttonOne}
            title="Make an appointment"
            onPress={() => {
              const { action, year, month, day } = DatePickerAndroid.open({
                date: new Date()
              }).then(response => {
                this.setState({
                  datePicker: true,
                  date: new Date(response.year, response.month, response.day)
                });
                response.month += 1;
                console.log("date", response);
              });
            }}
          />
          {this.state.datePicker
            ? Object.keys(availability).map((time, i) => {
                // console.log(time); this returns slots 1 thru 6
                return (
                  <View key={i} style={styles.slotButton}>
                    <TouchableOpacity
                      disabled={true}
                      onPress={() =>
                        this.props.addTimeSlotToDatabase(
                          time,
                          this.props.user.id,
                          this.state.date
                        )
                      }
                    >
                      <Text style={{ alignItems: "center" }}>
                        {availability[time]}
                      </Text>
                    </TouchableOpacity>
                  </View>
                );
              })
            : null}
        </View>
      </View>
    );
  }
}

Answer 1

Simply put the value in the state.

constructor(props) {
    super(props);
    this.state = {
        disabled: false
    };
}

render() {
    return(
        <TouchableOpacity disabled={this.state.disabled}>
            <Text>Click</Text>
        </TouchableOpacity>
    )
}