When to call function vs function() in react onClick? [duplicate]

I'm having questions about when to call a function inside a react component. Sometimes my code breaks when I don't add the brackets to a function call, but not always. Is there some sort of rule i'm missing here?

Doesn't work

// Callback of parent component
<Link onClick={this.props.OnNavigate}>
    A link
</Link>

Does work

// Callback of parent component
<Link onClick={this.props.OnNavigate()}>
    A link
</Link>

// Callback for function of component
<li onClick={this.toggleDepartments}>other example</li>

Answers:

Answer

foo() is calling the function referenced by foo. foo itself is just a reference to a function, it doesn't call the function.

So, you need to use parenthesis if you want to call the function right here and now.
You have to omit the parentheses if you want to pass the function to other code so it can call the function. That would be the case with event handlers. this.props.OnNavigation should be called when the click event happens (which is some time in the future), not when the component is rendered.

Answer

It's good practice to call the function with parens, because when you create a separate js file and link them together with the script tag, you know for certain that it's calling that specific function.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.