Updating the parent component's state, from a child-component

Question

can't change props parent correctly.

I do not know how to do it right.

I will be very grateful for any help.

 class ScheduleEditor extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                times : document.getElementsByClassName('schedule')[0].value.split(' '),
                items : [],
                hour : [],
                minute : []
            };
        }

        updateItems(times) {
            this.setState({times : times});
        }

        updateHM(time,val) {
            debugger;
            if(time == 'hour') {
                this.setState(hour : val);
            } else if(time == 'minute') {
                debugger;
                this.setState(minute : val);
            }
        }

        render() {
                this.state.items = [];
                this.state.hour = [];
                this.state.minute = [];
                for (const [index, hm] of this.state.times.entries()) {
                    let hour = hm.split(':')[0];
                    this.state.hour.push(hour);
                    let minute = hm.split(':')[1];
                    this.state.minute.push(minute);
                    this.state.items.push(
                        <React.Fragment key={index}>
                            <Button className = 'remove-time' 
                                    title = 'x' 
                                    times = {this.state.times} updateItems={(e) => this.updateItems(e)}/>
                            <HM refs = 'hour' time = {this.state.hour[index]} className = 'hour' indexHour = {index} updateHM = {(e) => this.updateHM()}/>
                            <HM refs = 'minute' time = {this.state.minute[index]} className = 'minute' indexMinute = {index} updateHM = {(e) => this.updateHM()}/>
                            <Button className = 'add-time' 
                                    title = '+' 
                                    times= {this.state.times} 
                                    updateItems={(e) => this.updateItems(e)}/>
                            <br/>
                        </React.Fragment>
                    )
                }
            return (
                <React.Fragment>
                    {this.state.items}
                </React.Fragment>
            )
        }
    }

class HM extends React.Component {
           constructor(props) {
               super(props);
           }

        click(e) {
            this.props.updateHM;
            debugger;
            let HM = e.target.className;
            let val = e.target.valueAsNumber;  
            debugger;
            this.props.updateHM(HM,val)
        }

        render() {
            return (
                    <input type='number' 
                           className = {this.props.className}
                           value={this.props.time}
                           onChange={(e) => this.click(e,this.props.time)}/>
            )
        }        
    } 

Answer 1

You can't directly access and modify props of the parent-element. Instead, you have to pass down a function (which modifies the parent's state) from the parent- to the child-, which then will be called in the child-element.

Parent-element:

<HM ... updateHM={(time, val) => this.updateHM(time, val)} />

Child-element:

click(e, time) {
    ...
    this.props.updateHM(this.props.refs, time);
}