Listening to User Input in React

Back to: ReactJS Tutorials

Listening to User Input in React:

In this article, I am going to discuss Listening to User Input in React with Examples. Please read our previous article where we discussed Adding Form Inputs in React with Examples. We want to react to every change in any of the inputs. For example, on every keystroke, we simply want to get the value the user entered and store that somewhere. For now, we just log it to the console.

Add Listeners in React:

Now to show the user data on the console, we need to add listeners to listen for every keystroke or for every change of the inputs. You’ll learn that you can do that, on the element where you want to add a listener. For example, on this input here,

By adding a prop that starts with “on”, react will suggest which listener you should add. As you can see in the above image, which event we want to listen to? We can listen to onInput but there is also another event that is onChange event which basically listens for every keystroke. It will trigger on every keystroke but the advantage of the on Change event is that we can use that same event for all the input types.

onChange Event Handler in React:

So, here, we will add an onChange event listener to the input for the title. This will add an event listener for the change event to the input element which is rendered in the DOM. And then we need to point at the code or at the function that should be executed when that event occurs.

Now, you’ll learn that we can define it inside curly braces as shown above with the function or with the arrow function. But it’s better to define it separately in the file. We will define the arrow function for the event listener before the return call.

Creating a function ‘titleChangeHandler’:

We’ll add a function ‘titleChangeHandler’. We named it ‘titleChangeHandler’ because this function should be executed whenever the title’s input changes. So inside curly braces of the onChange prop, we’ll pass a pointer to the ‘titleChangeHandler’ function as a value.

We don’t execute it here. we don’t add parentheses after the function name, we just point at this function. If we add console log code inside the titleChangeHandler function, we will execute it whenever we type something in the input of the title field.

Now, if we save it and open the developer tools,

Now, if we type anything in the input of the title, we will see ‘title changed successfully’ on the console for every keystroke we press.

That’s great, but typically we want to get the value that is typed by the user. And now the question is how can we get that value? Which possibilities do we have here? And the answer is quite trivial. If you know Vanilla JavaScript (JavaScript without react), if we add an event listener to some element in Vanilla JavaScript, let’s say we want to listen to the click event and in the function which you pass as a second argument,

Event Object in React:

So there, you automatically get an event object which describes the event which occurred,

That’s a default JavaScript behavior. You’ll get this in the browser when you listen to events. And we get this default event object here as well,

It will happen automatically; we don’t need to do anything to get this. Since we passed this function to react inside the onChange prop, react will make sure, or even the browser itself will make sure that we get such an event object when this change event occurs. Now we can log this object to see what’s inside it,

So, we have logged this event argument. And if we save it and look at inspect section, if we type anything in the input field of the title, we’ll see,

This object has a bunch of data. The interesting thing for us is the target field here,

This target here simply points to the DOM element for which the event occurred. In this case, input, and this input element in turn has a long list of properties that we can read and set.

But most importantly for us, it also has a value property.

This value property holds the current value of the input at the point of time this event occurs. This’s useful because this means that we can drill into this target, then this value to get the value that was currently entered when that event occurred for that element on which we’re listening.

In the next article, I am going to discuss Working with Multiple States in React with Examples. Here, in this article, I try to explain Listening to User Input in React with Examples. I hope you enjoy this Listening to User Input in React article.