React prop function undefined

Question

I have an element that has an onClick prop, and then another element which calls this prop, and does some other operations.

Here is the code:

DashboardSidebar:

class DashboardSidebar extends Component{
constructor(props){
    super(props);

    this.expandOption = this.expandOption.bind(this);
}

expandOption(id){
   ...
}

render(){
    return(
        <div className="DashboardSidebar">
            ...
            <DSidebarOption onClick={this.expandOption("dashboard")} id="dashboard" text="Dashboard" />
            ...
        </div>
    );
}
}

DSidebarOption:

class DSidebarOption extends Component{
constructor(props){
    super(props);

    this.handleClick = this.handleClick.bind(this);
}

handleClick(){
    ...
    this.props.onClick();
    ...
}


render(){
    return(
        <div className="DSidebarOptionContainer">
            ...
            <div onClick={this.handleClick} className="DSidebarOption">
                {this.props.text}
            </div>
            ...
        </div>
    )
}
}

I am getting the following error:

Uncaught TypeError: this.props.onClick is not a function

Any ideas why this might be happening?

In a comment on an answer that will hopefully be deleted, you've said the linked issue isn't the problem. But the `onClick={this.expandOption("dashboard")}` is certainly wrong, and unless `expandOption` *returns* a function, will result in exactly the error you describe, so it seems like it's the problem. If you think it isn't, I suggest posting a new question with that error fixed and with a **runnable** [mre] using Stack Snippets demonstrating the (new) problem. Stack Snippets support React, including JSX; [here's how to do one](http://meta.stackoverflow.com/questions/338537/). — T.J. Crowder, Jan 20 '22 at 09:27
@T.J.Crowder I understand that the code was probably wrong, but for whatever reason it didn't work. I'll post another question with a code snippet — JorensM, Jan 20 '22 at 09:29
Cool. Ping me here if you would when you do, I'm always keen to help. — T.J. Crowder, Jan 20 '22 at 09:29
@T.J.Crowder turns out your answer was correct after all! I don't know what I did wrong before, but I tried your solution once more and it worked this time. Thank you very much! — JorensM, Jan 20 '22 at 10:19
(BTW, I see that the question was downvoted. This problem does get posted a lot, so probably your best bet is to delete the question, which will reclaim the rep lost to the downvote. Totally up to you though.) — T.J. Crowder, Jan 20 '22 at 10:26
@T.J.Crowder Thanks for the tip, I will do that :) Have a good day — JorensM, Jan 20 '22 at 10:30

score 1 · Accepted Answer · answered Jan 20 '22 at 09:01

1

You should pass ur onclick like this

onClick={() => {this.expandOption("dashboard")}}

otherwise it gets called when the page mounts

answered Jan 20 '22 at 09:01

PCPbiscuit

417
5
16

There's a [well-established dupetarget](https://stackoverflow.com/questions/34226076/why-is-my-onclick-being-called-on-render-react-js) for this **very** commonly repeated question, please vote to close as duplicate rather than answering. – T.J. Crowder Jan 20 '22 at 09:03
@T.J.Crowder your link and the answer didn't solve the problem, I'm still getting the same error. Please unlock the thread. – JorensM Jan 20 '22 at 09:11
@JorensM - I've commented on the question instead of here, since this answer will hopefully be removed. – T.J. Crowder Jan 20 '22 at 09:27

React prop function undefined

1 Answers1