As a front-end developer, understanding events and knowing how to handle them is key to building interactive apps. Without event handlers, you can only build basic web apps with few dynamic features. React approach to event handlers is a little different than you might be used to in vanilla JavaScript or other front-end frameworks. Let’s talk about these differences and see how you can access input values in React apps.

What is SyntheticEvent?

One of the differences between React and plain JavaScript is that event handlers do not receive an event object, but an instance of SyntheticEvent, which is a React-specific wrapper that provides additional information about the event.

React team made this change for several reasons. For one, API provided by SyntheticEvent is easier to work with. Second, SyntheticEvent maintains a middle ground between browsers and React ecosystem, and allows us to handle events consistently, so there are no errors. Finally, the event handling itself is not that different than it is using normal event object. So there’s an element of familiarity and it doesn’t take too long to get used to SyntheticEvent.

Standardized

In native JavaScript, events allow you to specify your response to clicks like click and submit. There are specific pre-defined event handlers for most common events. Event handler is just a function that specifies what needs to be done when the event happens.

SyntheticEvent has practically the same set of pre-defined events, except its API is more standardized and compatible with all browses. The interface has all the properties and methods that you will need. For example, you can still use preventDefault() to stop the page from reloading when users submit the form. Similarly, you can access event.target.value to get current value in the field, or event.target.checked to get current status of the checkbox.

Now that we’re familiar with SyntheticEvent, let’s take a look at its one of the most important properties – target.

What is event.target?

In React, event.target allows you to access the DOM element where the event is happening. So if the user enters something into an input field, event.target will show input DOM element, and all its properties. value is one of those properties. It contains current value of the input. In case of inputs and radio buttons, it returns the value assigned to elements themselves, not their labels. Other inputs usually get their value from the state, and also update the state whenever their value changes.

Sometimes an event occurs in child element, but needs to be handled in the parent. In that case, we pass event handlers via props, which allows child components to send data from child to parent in React.

Current input value is not always stored in event.target.value. Depending on the type of input, event.target can have other properties, such as checked in case of checkbox inputs. You can also access event.target.style to manually change element’s styles, and much more.

Why is event.target.value undefined?

Beginners often run into the problem when they can not access current value in the field. There are several possible reasons for why event.target.value is undefined.

For once, you may have set the event handler on a wrong element. Sometimes beginners think that they need to set onSubmit on the input field or the button that submits the form. Naturally, this will generate an error, because this type of event handler is set on form elements themselves. As for buttons and input fields, usually onClick and onChange event handlers are used to handle these types of events.

It is also possible that you are using wrong type of event for a specific element. As previously mentioned, onChange event handler does nothing for buttons, because buttons do not change. They are supposed to be clicked, so we use the onClick event handler to capture this interaction.

Finally, sometimes we mistake the name of argument given to the SyntheticEvent. If you give it a name of e, then you can not access event.target.value. Instead, you need e.target.value to get current input value in the field.

Controlled inputs in React

If you’re familiar with front-end development, you’ve probably heard of two-way data binding. It is the idea that anything that goes into the input is also updated in the components’ state, and element gets its value from the state. So the element is bound in two ways. You can also handle react select onchange event.

Event handlers play an important role, as it is them that update the state when users enter something into field. Technically, you can execute any function without updating the state, but React ecosystem is centered around the principle of state and by extension, virtual DOM. Sometimes you have a state value embedded in your app, or use it to conditionally set a style for an element.

JSX supports all the basic event handlers you can think of – from onClick to onHover (although technically you have to use onMouseOver to replicate onHover in React). Other than that, you can manually add event handlers in the lifecycle methods or using the useEffect hook.

Event handlers always accept one argument – SyntheticEvent. In practice, developers often use e as a stand in for SyntheticEvent. As we already explained, synthetic event is a wrapper around the event object and contains information about the event that happened. For example – which element did the user interact with, and what type of event occurred. Then you can access event.target.value to store latest user input in the state. This data can be used for various dynamic features, from conditional rendering to dynamic validation of user inputs.

In class components, React forces you to update the state using the setState function. This is necessary to ensure the consistency of the state, and maintain a ‘single source of truth’. In functional components, the whole thing is easier, as you can use the function returned by the useState() hook to update a specific state variable.