How to log action when passed as a prop

[rlgreen91]

Hello,

So I am pretty confused about what seems to be a pretty typical use case in React. I have a ContactBlock component that takes a few props including an onClick prop, which is a function. I also have a ContactSidebar component that creates a list of those ContactBlock components with different values, like an onClick prop for one that opens your email client and another that opens a contact form page.

I'm able to create the story for ContactBlock and pass action('clicked') as a prop for onClick successfully:

const Template = args => <ContactBlock {...args} />;

export const Default = Template.bind({});
Default.args = {
  onClick: action('clicked'),
  title: 'Title',
  desc: 'Description'
};

That works as expected, and I can see the action logged in the panel when running locally. However, that action is not logged in the story for ContactSidebar:

const Template = args => <ContactSidebar {...args} />;

export const Default = Template.bind({});
Default.args = {
  openChat: action('clicked')
};

even though the actual component honestly just passes the prop through:

export const ContactSidebar = (openChat) => {
  return (
    <ContactBlock
      title={toI18n('help_page.get_in_touch.chat.title')}
      desc={toI18n('help_page.get_in_touch.chat.desc')}
      onClick={openChat}
    />
   <ContactBlock
      title={toI18n('help_page.get_in_touch.email.title')}
      desc={toI18n('help_page.get_in_touch.email.desc')}
    />

Nothing is logged in the actions panel at all, and additionally I get this console error: "Uncaught Error: Expected onClick listener to be a function, instead got a value of object type." What am I missing here?

Update: I thought by fixing my import statement and using this in my content sidebar story I'd fix it, but no dice. It's still throwing that same error and not logging in the actions panel.

Default.args = {
  openChat: ContentBlockStories.Default.args.onClick
};