React: Button onClick function is running on page load but not you click it

user_8377123 0
Viewed 7877

I am using the ButtonGroup and Button from ReactStrap. I have set an onClick function when you click one of the buttons:

< ButtonGroup >
  <Button>Edit</Button>
  <Button onClick={console.log("Print some text")}>Print text</Button>
  <Button>Set as default</Button>
</ButtonGroup >

But when I load the page this is what I get: enter image description here

Before I have even clicked the button. And if I do click it, nothing comes out in the console. Any ideas?

react-bootstrap bootstrap-4 reactjs button javascript
3 Answers

Onclick must be function. You just set onlick as result of console.log("Print some text")

Try this

   <Button onClick={() => {console.log("Print some text")}}>Print text</Button>
user_29008050

onClick parameter is evaluated as a callback, so if you pass something that is not a function, is evaluated and executed in the runtime.

Instead, you should pass a function to the onClick parameter:

  <Button onClick={() => { console.log("Print some text"); }}>Print text</Button>

Be careful with the inline functions because they are evaluated each time that render is executed, that can be multiple times, each functions is more memory used by the browser.

If you has a class, you can use a arrow fat method:

/* ... */
handleOnClick = () => {
  console.log("Print some text");
}

render() {
  return (
    <ButtonGroup>
      <Button>Edit</Button>
      <Button onClick={this.handleOnClick}>Print text</Button>
      <Button>Set as default</Button>
    </ButtonGroup >
  );
}
/* ... */
user_39792840

To make it clearer

On any event trigger (onClick, onChange , etc) you must specified a function to call when the event occur not calling the function right away

Consider this function

ES5:

function callMe() {
  console.log("Some text");
}

ES6:

const callMe = () => {
  console.log("Some text");
}

if you want to call this function when clicking the button you can't do this

<Button onClick={callMe()}>Print text</Button>

This will call the fuction callMe when the button is loaded once. What you need to do to make it works is

<Button onClick={callMe}>Print text</Button>

Notice that there is no parenthesis after the function name which indicate that the function is not yet called.

user_81402020
Related