Name: Inspect Component Events with React Storybook
Uploaded: 2016-10-25T02:41:57-05:00
Description: Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

https://app.egghead.io/api/v1/lessons/react-inspect-component-events-with-react-storybook/subtitles

Inspect Component Events with React Storybook

[00:00] Now we're looking at the header component of our to-do MEC app. We also have a input box, where we can add a new to-do item.

[00:07] Let's try to add a new to-do item. I type new to-do item, and press enter. Basically, I should be able to capture this to-do item, and maybe say we [indecipherable] some story.

[00:20] But, I can't do anything because I haven't write a prop to capture this new to-do item, and that's what we're going to do right now.

[00:27] Actually, Storybook has a way to capture these actions, and log it on the actions logger panel. That's what we're going to do right now.

[00:35] First, I need to import the action function from the @kadira/storybook module. Now, I'm going to write the add to-do prop.

[00:44] I type add to-do, and actions, and I should give a name, to-do item. It could be anything. I save this file, and try to hit enter on this input box.

[01:01] I can see the add to-do item just logged on the action logger with this name that I provided to the action function.

[01:10] I also tried to add something new, let's say hello to-do, and press enter. I can see that has failed on the action logger.

[01:20] I can also change this action name into, let's say new to-do. I can write something new, and you can see to-do item actually change into new-to-do.

[01:36] Likewise, you could write actions about any prop event in your components, and try to see the output inside the action logger.

Inspect Component Events with React Storybook

Share this video with your friends