Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In


    Inspect Component Events with React Storybook

    Arunoda SusiripalaArunoda Susiripala

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

    react-storybookReact Storybook


    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.