React/Storybook : adding actions to display data received by event handler

[developerasun]

research : adding onClick action to Storybook component

read this

Action args : Actions work via supplying special Storybook-generated “action” arguments (referred to as "args" for short) to your stories. There are two ways to get an action arg:

Action argType annotation : You can use argTypes to tell Storybook that an arg to your story should be an action. Usually, it makes sense to do this at the component level (although you can apply it per individual story):

// Button.stories.js|jsx|ts|tsx

import { Button } from './Button';

export default {
  /* 👇 The title prop is optional.
  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
  * to learn how to generate automatic titles
  */
  title: 'Button',
  component: Button,
  argTypes: { onClick: { action: 'clicked' } },
};

reference

• https://storybook.js.org/docs/react/essentials/actions