Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1068 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Inspect Component Events with React Storybook

1:45 React lesson by

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

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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

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.

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 00:19] some story.

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.

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.

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

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.

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

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.

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.

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



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?