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

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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


    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 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.