Why is onClick triggering on render of component instead of when clicked?

Question

I have this button console.log as a test and it is being triggered whenever I refresh the page instead of when I click a nav button. Let me know if you can see the problem with this code if you'll need more.

import React from 'react';
import SideNav from "react-sidenav";
var TeamActions = require('../actions/TeamActions');

export default class Nav extends React.Component {
  pushName(name) {
    TeamActions.setTeamName(name);
  }

  render() {
    return(
      <SideNav.Menu
        path="#"
        itemHeight="32px"
        styles={{margin: "0"}}
      >
        <SideNav.MenuItem
          itemKey="truck"
        >
        //this is where I'm using onClick
          <SideNav.ILeftItem
            className="fa fa-truck"
            onClick={console.log("hello")}
          >
              Boston Celtics
          </SideNav.ILeftItem>
        </SideNav.MenuItem>

Jed Richards · Accepted Answer · 2016-01-11 10:57:05Z

7

That's because you're actually calling the console.log function in your onClick handler, rather than just pointing to its reference. JSX compiles to plain JS, so anything between {} brackets will be evaluated. You need to just point to the function reference in your onClick, not call it.

It's slightly complicated with the fact that when using ES6 classes you need to bind to the current this, it isn't autobound for you like with the old style React.createClass syntax, but here's a quick example,

class MyComponent {

  onLinkClicked () {
    console.log('Clicked!')
  }

  render () {
    return (
      <a onClick={this.onLinkClicked.bind(this)}>Click me</a>
    );
  }
}

edited Jan 11, 2016 at 10:57

answered Aug 26, 2015 at 16:18

Jed Richards

12.5k3 gold badges28 silver badges37 bronze badges

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

2 Comments

Username Over a year ago

Okay, so it no longer fires on render but it is not firing when the button is being clicked either. Do you know where I should place the onClick to make it fire?

Jed Richards Over a year ago

I can't be sure without seeing your code. Have a read of these docs they may help facebook.github.io/react/blog/2015/01/27/…

Collectives™ on Stack Overflow

Why is onClick triggering on render of component instead of when clicked?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related