While coming to the end of Phase 2 in Flatiron School, React is a big topic that could be talked about for hours or even days. But it's an important thing to learn about. React is a library that lets you build user interfaces out of components. Components are reusable code that take in props and return react elements(JSX). Now that we have an image on what react and what a component is now we can talk about events. Since React is built entirely out of javascript we are still handling html like elements. As you guessed it events are the same as event listeners.
Step 1
There are few event handlers you could use such as onSubmit, onChange, onClick, onFocus etc. But to have a better understanding will start with onClick. First we need to add what event handler we are using on the JSX and that would be the button.
An event handler will be triggered when the user interacts with the button since we are using the onClick event.
Step 2
Now since we are passing the event handler in the JSX element, we have to make a callback function for what we want the button to do when a user clicks on the button. So we are going to create a callback function called clicking for the button and have it console.log "button has been clicked".
Step 3
Now that we have the callback function, we have to add this callback function to the event handler. After adding the callback function, now when we click the button the event handler will invoke the callback function to console.log "button has been clicked".
This is how you could use an event handler of onClick. Pretty simple and there are many ways you could use this button, but let's get into more depth on what you could do with the onClick button.
CallBack Props
Step 1
You don't have to make the callback function in the same component as your event handler is being used. You could use the callback function from a different component and use it in the component where your event handler is being used. In order to make this happen we need to pass the callback function as a prop. But we could only pass down props from the parent component. Right now my parent component is the App component, so we can create the same function clicking as a prop called "buttonClicked".
Step 2
Back to the Click component, now we will be able to use the buttonClicked prop and get the console.log("button has been clicked").
Parameter
For the event handler callback function, the callback takes a parameter. The parameter would be "e":
What this parameter will do is give you the information about the event handler. We have the parameter set up already lets console.log the parameter and is the information of the event handler.
If you are using onChange or onSubmit this parameter will be used a lot , so it is a good idea to get very familiar with this parameter and learn what information you access while using these event handlers. One major information you could access is the value of the event. The value of what the user is submitting or the changes the user is doing.
Top comments (0)