From My parent component I give an array of time slots to a child component in that component I display the time slots and when a time slot is clicked it should give that value back to the parent component.
But something goes wrong. When I log everything. The clicked value does log but the same value that should be passed to the parent doesn't log
Logs
I also noticed that the parent log (the one that doesn't show a value) comes first. But it shouldn't log this one first
Child component
class ShowAvailableTimeslots extends Component {
constructor(props) {
super(props);
this.state = {
size : 5,
selectedSlotValue:"",
}
this.handleTimeSlotClick = this.handleTimeSlotClick.bind(this);
}
handleTimeSlotClick(timeslot){
this.setState({
selectedSlotValue: timeslot
})
this.props.onClick(this.state.selectedSlotValue)
console.log('time slot value', timeslot)
}
render() {
var timeSlotArr = this.props.timeSlots.slice(0,this.state.size);
return (
<React.Fragment>
{
timeSlotArr.map(timeSlot => <a className="timeslot btn "key={timeSlot} onClick={() => {this.handleTimeSlotClick(timeSlot)}}>{timeSlot}</a>)
}
</React.Fragment>
)
}
}
export default ShowAvailableTimeslots
parent component
class UpdateAppointment extends Component {
constructor(props) {
super(props);
this.state = {
startDate: new Date(),
selectedService: "",
selectedClient: "",
start: "",
end: "",
clientId: "",
serviceId: "",
id: this.props.calendar.id,
selectedDate: this.props.calendar.start,
updateAppointmentStart: "",
updateAppointmentEnd: "",
updateStartDate: "",
updateDate: "",
buttonIsDisabled: true,
appointmentHasOverlap: false,
updatedView: false,
newServiceSelected: false,
AvailabletimeSlots:[],
};
this.openDeleteAppointment = this.openDeleteAppointment.bind(this);
this.handleDateSelect = this.handleDateSelect.bind(this);
this.handleServiceSelect = this.handleServiceSelect.bind(this);
};
handleDateSelect(date) {
this.setState({
selectedDate: Moment(date),
})
}
handleServiceSelect = (selectedServiceObj, buttonState, timeSlots) => {
this.setState({
newServiceSelected: true,
AvailabletimeSlots: timeSlots,
});
console.log("available timeslots: " , timeSlots)
if (buttonState) {
this.setState({
buttonIsDisabled: buttonState,
appointmentHasOverlap: buttonState,
});
} else {
this.setState({
selectedService: selectedServiceObj,
serviceId: selectedServiceObj.id,
start: this.props.calendar.start,
end: this.props.calendar.start.clone().add(selectedServiceObj.hours, 'hours').add(selectedServiceObj.minutes, 'minutes'),
buttonIsDisabled: buttonState,
appointmentHasOverlap: buttonState,
newServiceSelected: true,
});
}
};
getSelectedTimeslot(selectedSlotValue){
console.log("seletedStorValue", selectedSlotValue)
// console.log("selectedDate", this.state.selectedDate)
// this.setState({
// // updateAppointmentStart: Moment(`${this.state.selectedDate} ${selectedSlotValue}`, 'YYYY-MM-DD HH:mm')
// })
}
handleClientSelect = (selectedClientObj) => {
this.setState({ selectedClient: selectedClientObj, clientId: selectedClientObj.id });
};
render() {
return (
<React.Fragment>
<div className="customModal">
<div className="modal-container">
<div className="update">
<div className="update-time">
<label>Selected date: </label>
<p>{this.state.selectedDate.format('dddd, MMMM Do YYYY')}</p>
<DatePicker
selected={this.state.selectedDate.toDate()}
onChange={this.handleDateSelect}
inline
/>
</div>
<div className="update-service-client">
<ServiceSearch onChange={this.handleServiceSelect} serviceId={this.state.viewServiceId} start={this.state.selectedDate} searchGoal='update'/>
<div>
{this.state.newServiceSelected ? <ShowAvailableTimeslots onClick={this.getSelectedTimeslot} timeSlots={this.state.AvailabletimeSlots}/> : ''}
</div>
<ClientSearch onChange={this.handleClientSelect} clientId={this.state.viewClientId} />
</div>
</div>
</div>
</React.Fragment>
)
}
}
export default UpdateAppointment
