When you write code inline, the same pitfall presents itself in a different
way:

passing a function (correct)  |  calling a function (incorrect)   
---|---  
` <button onClick={() => alert('...')}> ` |  ` <button onClick={alert('...')}> `  
  
Passing inline code like this won’t fire on click—it fires every time the
component renders:

    
    
    // This alert fires when the component renders, not when clicked!  
    
    
    <button onClick={alert('You clicked me!')}>

If you want to define your event handler inline, wrap it in an anonymous
function like so:

    
    
    <button onClick={() => alert('You clicked me!')}>

Rather than executing the code inside with every render, this creates a
function to be called later.

In both cases, what you want to pass is a function:

  * ` <button onClick={handleClick}> ` passes the ` handleClick ` function. 
  * ` <button onClick={() => alert('...')}> ` passes the ` () => alert('...') ` function. 

[ Read more about arrow functions. ](https://javascript.info/arrow-functions-
basics)

###  Reading props in event handlers

Because event handlers are declared inside of a component, they have access to
the component’s props. Here is a button that, when clicked, shows an alert
with its ` message ` prop:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    function AlertButton({ message, children }) {
      return (
        <button onClick={() => alert(message)}>
          {children}
        </button>
      );
    }
    
    export default function Toolbar() {
      return (
        <div>
          <AlertButton message="Playing!">
            Play Movie
          </AlertButton>
          <AlertButton message="Uploading!">
            Upload Image
          </AlertButton>
        </div>
      );
    }
    
    

Show more

This lets these two buttons show different messages. Try changing the messages
passed to them.

###  Passing event handlers as props

Often you’ll want the parent component to specify a child’s event handler.
Consider buttons: depending on where you’re using a ` Button ` component, you
might want to execute a different function—perhaps one plays a movie and
another uploads an image.

To do this, pass a prop the component receives from its parent as the event
handler like so:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    function Button({ onClick, children }) {
      return (
        <button onClick={onClick}>
          {children}
        </button>
      );
    }
    
    function PlayButton({ movieName }) {
      function handlePlayClick() {
        alert(`Playing ${movieName}!`);
      }
    
      return (
        <Button onClick={handlePlayClick}>
          Play "{movieName}"
        </Button>
      );
    }
    
    function UploadButton() {
      return (
        <Button onClick={() => alert('Uploading!')}>
          Upload Image
        </Button>
      );
    }
    
    export default function Toolbar() {
      return (
        <div>
          <PlayButton movieName="Kiki's Delivery Service" />
          <UploadButton />
        </div>
      );
    }
    
    

Show more

Here, the ` Toolbar ` component renders a ` PlayButton ` and an ` UploadButton
` :

  * ` PlayButton ` passes ` handlePlayClick ` as the ` onClick ` prop to the ` Button ` inside. 
  * ` UploadButton ` passes ` () => alert('Uploading!') ` as the ` onClick ` prop to the ` Button ` inside. 

Finally, your ` Button ` component accepts a prop called ` onClick ` . It
passes that prop directly to the built-in browser ` <button> ` with `
onClick={onClick} ` . This tells React to call the passed function on click.

If you use a [ design system ](https://uxdesign.cc/everything-you-need-to-
know-about-design-systems-54b109851969) , it’s common for components like
buttons to contain styling