score:2

Accepted answer

onclick accepts to be a function and would be written as

<button onclick={() => {console.log("hi")}}>hello</button>

or

handleclick() {
    console.log('hi');
}
<button onclick={this.handleclick}>hello</button>

instead of

<button onclick={console.log("hi")}>hello</button>

if you write onclick={console.log("hi")} , on each render the value for onclick is evaluated and hence hi is seen on console

score:1

you should provide a function in the event handler, not call the function. see:

import react from "react";
import { render } from "react-dom";

const app = () => (
  <div>
    <div>
      <button onclick={() => {console.log("hi")}}>hello</button>
    </div>
  </div>
);

render(<app />, document.getelementbyid("root"));

Related Query

More Query from same tag