Реагировать на обновленную форму значения состояния, дочерний элемент не достигает родительского компонента

Question

• 1000 Но что-то идет не так. Когда все регистрирую. Выбранное значение регистрируется, но то же значение, которое должно быть передано родителю, не регистрируется

Журналы

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 (
            


                {
                    timeSlotArr.map(timeSlot =>  {this.handleTimeSlotClick(timeSlot)}}>{timeSlot})

                }

            
        )
    }
}

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 (
            
                 Выбранная дата:  {this.state.selectedDate.format ('d ddd, MMMM Do YYYY')}   {this.state.newServiceSelected? : ''}     )}} экспорт по умолчанию UpdateAppointment