React how to send method to childComponent

Question

Hi i have trouble to send method from parrent to child in react. I did this before and it works ... Why it no works anymore?

I am rendering this:

<div>
     <ScheduleSelectModal colupdate={this.updateColumn.bind(this)} subject={this.state.selectedSubject} subjectslist={this.state.mySubjects} show={this.state.modalShow} onHide={this.changeModalState.bind(this)}>
                </ScheduleSelectModal>
            </div>

This is my method:

    updateColumn(newSubject,dayId){
        console.log("tu som");
        console.log(this.state.schedule);
    }

My modal:

 ScheduleSelectModal extends Component {

   componentDidUpdate(prevProps, prevState, snapshot) {
       console.log("modal props:");
       console.log(this.props.subject);
   }

   update(){
       console.log("updating...");
       this.props.updatecolumn("test","test");
   }

    createList() {
        let items = [];
        if (this.props.subjectslist !== null)
            this.props.subjectslist.map(subject =>
                items.push(<Button key={subject.id} block className={"my-1"} onClick={this.update.bind(this)}>{subject.name} </Button>)
            );

        return items;
    }


    render() {
        return (
            <Modal
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        {this.renderHeader()}
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <ButtonGroup vertical className={"w-100"}>
                        {this.createList()}
                    </ButtonGroup>
                </Modal.Body>
            </Modal>
        );
    }
}

And this is warning i am getting:

index.js:1375 Warning: Invalid value for prop `colupdate` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

Really don't know what the issue is. Thx for help

Answer 1

class ParentComponent extends Component {
    passedFunction = () => {}
    render() {
      <ChildComponent passedFunction={this.passedFunction}/>
    }
}


class ChildComponent extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

You can use arrow function to avoid all the bindings. If you want to bind it, bind it in the constructor like so... in the parent component.

constructor() {
        this.passedFunction = this.passedFunction.bind(this)
    }

<ChildComponent passedFunction={this.passedFunction}/>

I could see that, in your child component you are using :

update(){
       console.log("updating...");
       this.props.updatecolumn("test","test");
   }

but your props for that function is colupdate ie you should be using

update(){
           console.log("updating...");
          this.porps.colupdate("test","test");
       }

Hope this helps!