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.