Dicey Action?

[TurtleWolfe]

I forked the Button story and customized the action.. so next I customize the Button to make a dice. I expected it to still show the same action as before.. but now it shows none. I was going to work on learning how to make the action panel to show it calling a random function or what it rolled.. but I'm more confused why it's showing nothing. Is there a way I should be importing the function into StoryBook.. or since they are both called on click they could be conflicting to show nothing?

MyDice.js

// import React from 'react';
// // import PropTypes from 'prop-types';
// const MyDice = ({ onClick }) => (
//   <button onClick={onClick}>dis My Dice</button>
// );

// export default MyDice; 

import React from 'react';

// const MyDice = ({ onClick }) => (

class MyDice extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 7,
    };
  }

  generateRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  render() {
    return (
      <button
        className="myDice"
        onClick={
          () => this.setState(
            { value: this.generateRandom(1, 6) }
          )
        }>
        {this.state.value}
      </button>
    );
  }
}

export default MyDice;

MyDice.stories.js

import React from 'react';
import MyDice from '../MyDice/MyDice';
import imageUrl from '../../shared/images/logo.svg';
import { action } from '@storybook/addon-actions';

export default {
  title: 'MyDice',
  component: MyDice,
  parameters: {
    assets: [
      imageUrl, // link to a file imported
      'https://via.placeholder.com/300/09f/fff.png', // link to an external image
      'https://www.example.com', // link to a webpage
      'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
    ],
  },
};

export const Text = () => <MyDice onClick={action('dis clicked My Text Dice')}>Hello MyDice</MyDice>;

export const Emoji = () => (
  <MyDice onClick={action('dis clicked.. but no emojis, so sad face')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </MyDice>
);

https://turtlewolf.github.io/disBook/?path=/story/mydice--text

[tooppaaa]

You have to wire the onClick property you set on MyDice to the button click. action would work the same way you would handle a click in a "real" application. Nothing to do with Storybook's code here.