"TypeError: this.props.changeFormStatus is not a function" when trying to pass a function to a child component

Question

I'm trying to pass a function to a child component that will trigger the logic that will display a simple text form on my webpage after a button has been pressed but I am getting the error message :

TypeError: this.props.changeFormStatus is not a function

Below is the code for the parent component:

import React from 'react';
import ReactDom from 'react-dom';
import RenderIcon from "./RenderIcon";
import RenderForm from "./RenderForm";



class RetroColumn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {formStatus:false};
        this.changeFormStatus = this.changeFormStatus.bind(this);
    }

    changeFormStatus() {
        this.setState({formStatus:true});
    }

    render() {
        return (
            <div className="column">
                <div className="ui segment">
                    <h1 className="ui header">
                        <RenderIcon iconName="minus" iconMeaning="Remove"/>
                        {this.props.columnName}
                        <RenderIcon iconName="plus" whenUserClicks={this.changeFormStatus} iconMeaning="Add"/>
                    </h1>
                    <RenderForm revealForm={this.state.formStatus}/>
                </div>
            </div>
        );
    }


};

export default RetroColumn;

And here's the code for the child component:

import React from 'react';
import ReactDom from 'react-dom';

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

    whenUserClicks() {
        console.log(this.props);
        this.props.changeFormStatus();
    };

    render() {
        return (
            <div className="ui vertical animated button" tabIndex="0" onClick={this.whenUserClicks()}>
                <div className="hidden content">{this.props.iconMeaning}</div>
                <div className="visible content">
                    <i className={`${this.props.iconName} icon`}></i>
                </div>
            </div>
        );
    }


}

export default RenderIcon;

Answer 1

Look at the component that you are rendering and passing the function to. You wrote this:

<RenderIcon iconName="plus" whenUserClicks={this.changeFormStatus} iconMeaning="Add"/>

That means that inside of the RenderIcon component, the function is now named this.props.whenUserClicks

In your outer component, the function is named this.changeFormStatus. But in the inner component, it is named this.props.whenUserClicks.

Also, you are not calling this.props.whenUserClicks. You have made a new function inside of the child component called this.whenUserClicks

Also, in your child component, you have this:

  <div onClick={this.whenUserClicks()}></div>

You want to change that to

 onClick={(e)=>{
     this.whenUserClicks()
 }

or

 onClick={this.whenUserClicks}

If you invoke the function like you did, then the function will just run immediately when the page is loaded, instead of waiting for when the div is clicked.