Accepted answer

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>


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


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


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.


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 (
      <Button onClick={this.handleOnClick}>Print text</Button>
      <Button>Set as default</Button>
    </ButtonGroup >
/* ... */

Related Query

More Query from same tag