but not specify behavior. Instead, components like
` PlayButton ` and ` UploadButton ` will pass event handlers down.

###  Naming event handler props

Built-in components like ` <button> ` and ` <div> ` only support [ browser
event names ](/reference/react-dom/components/common#common-props) like `
onClick ` . However, when you’re building your own components, you can name
their event handler props any way that you like.

By convention, event handler props should start with ` on ` , followed by a
capital letter.

For example, the ` Button ` component’s ` onClick ` prop could have been
called ` onSmash ` :

App.js

App.js

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

    
    
    function Button({ onSmash, children }) {
      return (
        <button onClick={onSmash}>
          {children}
        </button>
      );
    }
    
    export default function App() {
      return (
        <div>
          <Button onSmash={() => alert('Playing!')}>
            Play Movie
          </Button>
          <Button onSmash={() => alert('Uploading!')}>
            Upload Image
          </Button>
        </div>
      );
    }
    
    

Show more

In this example, ` <button onClick={onSmash}> ` shows that the browser `
<button> ` (lowercase) still needs a prop called ` onClick ` , but the prop
name received by your custom ` Button ` component is up to you!

When your component supports multiple interactions, you might name event
handler props for app-specific concepts. For example, this ` Toolbar `
component receives ` onPlayMovie ` and ` onUploadImage ` event handlers:

App.js

App.js

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

    
    
    export default function App() {
      return (
        <Toolbar
          onPlayMovie={() => alert('Playing!')}
          onUploadImage={() => alert('Uploading!')}
        />
      );
    }
    
    function Toolbar({ onPlayMovie, onUploadImage }) {
      return (
        <div>
          <Button onClick={onPlayMovie}>
            Play Movie
          </Button>
          <Button onClick={onUploadImage}>
            Upload Image
          </Button>
        </div>
      );
    }
    
    function Button({ onClick, children }) {
      return (
        <button onClick={onClick}>
          {children}
        </button>
      );
    }
    
    

Show more

Notice how the ` App ` component does not need to know _what_ ` Toolbar ` will
do with ` onPlayMovie ` or ` onUploadImage ` . That’s an implementation detail
of the ` Toolbar ` . Here, ` Toolbar ` passes them down as ` onClick `
handlers to its ` Button ` s, but it could later also trigger them on a
keyboard shortcut. Naming props after app-specific interactions like `
onPlayMovie ` gives you the flexibility to change how they’re used later.

###  Note

Make sure that you use the appropriate HTML tags for your event handlers. For
example, to handle clicks, use [ ` <button onClick={handleClick}> `
](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) instead of
` <div onClick={handleClick}> ` . Using a real browser ` <button> ` enables
built-in browser behaviors like keyboard navigation. If you don’t like the
default browser styling of a button and want to make it look more like a link
or a different UI element, you can achieve it with CSS. [ Learn more about
writing accessible markup. ](https://developer.mozilla.org/en-
US/docs/Learn/Accessibility/HTML)

##  Event propagation

Event handlers will also catch events from any children your component might
have. We say that an event “bubbles” or “propagates” up the tree: it starts
with where the event happened, and then goes up the tree.

This ` <div> ` contains two buttons. Both the ` <div> ` _and_ each button have
their own ` onClick ` handlers. Which handlers do you think will fire when you
click a button?

App.js

App.js

Reset  [