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
Become a member
to unlock all features

    Inspect Component Events with React Storybook

    Arunoda SusiripalaArunoda Susiripala
    react-storybookReact Storybook

    Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React 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.