To get a sense of how we handle events in react, let's take a closer look at what an event looks like in vanilla JavaScript and compare it to what we see with react. To do that, let's create a button and add a click event listener to it. When the button is clicked, we'll log event to the console.
Open up a new CodeSandbox and try the exercise below with me. In vanilla JS, we have a couple of choices for how we want to attach an event listener. We can either add an html attribute directly to the element we want to target, as below:
<button onclick="console.log(event)">Click Me</button>or we can use a CSS selector to target the element and use the addEventListener method.
<button id="click-me">Click Me</button>
...
<script>
const btn = document.querySelector('#click-me')
btn.addEventListener('click', function(event){
console.log(event)
})
</script>In either approach the event looks something like this:
Now, let's try the same thing in React.
When we're adding event listeners in React, we'll generally be attaching them inline as JSX attributes applied to the element we want to target. However, let's see what happens when we try to pass in a string like we did in the JS example. To do this, let's open up a new React CodeSandbox.
function App() {
return (
<button onclick="console.log(event)">Click Me</button>
)
}Let's follow the errors and warnings we get from React to figure out what we need to do here.
How do we insert a JavaScript expression into JSX?
What does putting curly braces around an expression within JSX actually do?
What do Events look like in React?
React synthetic events are designed to provide a consistent API for interacting with different types of events. They also create a wrapper around native browser events to handle cross browser compatibility issues so that events behave the same way across different browsers.
If we were building a counter to keep track of the number of a particular item in our cart, what type of event listener would we need to attach?
Let's talk a bit about how we would approach this with vanilla javascript. If we were starting with the following html:
<button id="minus">-</button>
<span id="counter">0</span>
<button id="plus">+</button>What would we have to do to get the app working as pictured above?
We'd need 2 onclick event listeners. We would make two functions that respond to them, find the number and increment or decrement the number.
The main difference when we’re thinking about handling events in react is that we generally want to avoid doing DOM manipulations directly. Whereas in the javascript example we use the DOM as the source of truth for our data, in react we use state and props as the source of truth for our data. One of the benefits of this approach is that React doesn’t have to read from the DOM to decide how it should be updated. React will automatically update the DOM in response to changes to our data. Check out the diagram below.
Let's try to build out the counter app using React. We'll be using a useState hook to keep track of the count we'll be displaying, how will we write the rest of the code to get the app behaving as pictured?