I would like to know why in certain types of events, such as `onClick`, I have to declare an anonymous function to execute the `onClick` if my function contains arguments.

**Example**: <https://codesandbox.io/s/suspicious-ramanujan-v998u>

```
export default function App() {

  const myValue = "MY VALUE";

  const handleClick = (anyString) => {
    console.log(anyString);
  };

  const anotherClick = () => {
    console.log("It works");
  };

  return (
    <>
      <Button onClick={() => anotherClick()} color="primary">
        Works without arguments <-- Works
      </Button>
      <Button onClick={anotherClick} color="secondary">
        Works without arguments <-- Works
      </Button>
      <Button onClick={() => handleClick(myValue)} color="primary">
        Works with arguments <-- Works
      </Button>
      <Button onClick={handleClick(myValue)} color="secondary">
        Does NOT work with arguments <-- Does NOT work
      </Button>
    </>
  );
}

```

**Question**
I do not understand why I have to create an anonymous function if the function I want to execute has arguments.

Why do I have to do `onClick={() => handleClick(myString)`}?

Why `onClick={handleClick(myString)}` is not enough?