How do I disable touchableOpacity? - react-native

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>
)
}

Answer 2

Sometimes I do like this
import { TouchableOpacity, View } from 'react-native';
const MainView = isDisabled ? View : TouchableOpacity;
return (
<MainView onPress={}>