React prop function undefined [duplicate]

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 minimal reproducible example using Stack Snippets demonstrating the (new) problem. Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
– T.J. Crowder, Commented Jan 20, 2022 at 9: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
– JorensM, Commented Jan 20, 2022 at 9:29
Cool. Ping me here if you would when you do, I'm always keen to help. — T.J. Crowder
– T.J. Crowder, Commented Jan 20, 2022 at 9: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
– JorensM, Commented Jan 20, 2022 at 10:19

PCPbiscuit · Accepted Answer · 2022-01-20 09:01:49Z

1

You should pass ur onclick like this

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

otherwise it gets called when the page mounts

answered Jan 20, 2022 at 9:01

PCPbiscuit

60310 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

T.J. Crowder Over a year ago

There's a well-established dupetarget for this very commonly repeated question, please vote to close as duplicate rather than answering.

JorensM Over a year ago

@T.J.Crowder your link and the answer didn't solve the problem, I'm still getting the same error. Please unlock the thread.

T.J. Crowder Over a year ago

@JorensM - I've commented on the question instead of here, since this answer will hopefully be removed.

Collectives™ on Stack Overflow

React prop function undefined [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related