React 16 Tooling

Experimenting with actions

Let's shift our attention to another add-on—Actions. This add-on is enabled in your Storybook by default. The idea with Actions is that once you select a story, you can interact with the rendered page elements in the main pane. Actions provide you with a mechanism that logs user interactions in the Storybook UI. Additionally, Actions can serve as a general-purpose tool to help you monitor data as it flows through your components.

Let's start with a simple button component:

import React from 'react'; 
 
const MyButton = ({ onClick }) => ( 
  <button onClick={onClick}>My Button</button> 
); 
 
export default MyButton; 

The MyButton component re

 

nders a <button> element and assigns it an onClick event handler. The handler ...