Storybook action not logging

Question

I'm developing a component for a React project in Storybook, but clicking the button doesn't log anything to the action panel. Why doesn't the action log?

The stories...

// Button.stories.js
import React from 'react'
import Button from '../components/Button'

export default {
  title: 'Button',
  argTypes: { onClick: { action: 'clicked' } }
}

const Template = args => <Button {...args} />

export const Primary = Template.bind({})
Primary.args = {
  primary: true,
  label: 'Button'
}

and the component...

// Button.jsx
function Button() {
  const clickHandler = () => {
    alert('!')
  }

  return (
    <button className='button' onClick={clickHandler}>
      Button
    </button>
  )
}

Answer 1

You are not passing the onClickHandler to Button component, put {onClickHandler} in Button args

And then pass it to the onClick prop in the rendered DOM element.

This way it will make it the on click handler passable by Storybook, and then can be logged by Storybook actions.