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: 
Before I have even clicked the button. And if I do click it, nothing comes out in the console. Any ideas?
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> 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 > ); } /* ... */ 
Button to re-render, the second one would use the same callback function thus preventing Button from re-rendering, yet it will create one new handleOnClick function per component instance, rather than reusing a prototype method. This might not matter in most cases, but if you implement something like a spreeadsheet or a long list with many event handlers and some of your users use average computers, they might notice the difference.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.
onClick={() => {console.log("Print some text")}}