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.