Skip to content

Specifying Arguments

Here's a for you: what if we want to specify arguments to this function?

For example, let's suppose that our function is called setTheme, and we'll use it to change the user's color theme from Light Mode to Dark Mode.

In order for this to work, we need to supply the name of the theme we're switching to, like this:

// Switch to light mode:
setTheme('light');


// Switch to dark mode:
setTheme('dark');

How do we do this, though?

If we pass setTheme as a reference to onClick, we can't supply arguments:

// 🚫 Invalid: calls the function without 'dark'
<button onClick={setTheme}>
  Toggle theme
</button>

In order to specify the argument, we need to wrap it in parentheses, but then it gets called right away:

// 🚫 Invalid: calls the function right away
<button onClick={setTheme('dark')}>
  Toggle theme
</button>

We can solve this problem with a wrapper function:

// ✅ Valid:
<button onClick={() => setTheme('dark')}>
  Toggle theme
</button>

We're creating a brand-new anonymous arrow function, () => setTheme('dark'), and passing it to React. When the user clicks the button, the function will run, and the code inside the function is executed (setTheme('dark')).

If you're not super comfortable with arrow functions, be sure to check out the “Arrow Functions” primer lesson 👀.

If it's still confusing, there's no need to worry: this pattern is very common in React, and there will be ample opportunity in this course for you to become familiar and comfortable with it!