What is the e.target.value in the React.js ?

e is the event, which in this case is change, target is the element that triggered the event, which in this case is the input, and value is the value of the input element.

Event.target

The read-only target property of the Event interface is a reference to the object onto which the event was dispatched.

The Event interface represents an event which takes place in the DOM. An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task.

There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.

Event-handlers are usually connected (or "attached") to various HTML elements (such as <button>, <div>, <span>, etc.) using EventTarget.addEventListener(), and this generally replaces using the old HTML event handler attributes.

What is an event.target?

event.target returns the DOM element that triggered a specific event, so we can retrieve any property/ attribute with a value.

event.target.value

We can access the value of an event with event.target.value.

Example: We have a form, and we want to print out the value we type in.

<form class="myform">

<label>Name: </label>

<input type="text" />

</form>;

<div class="output"></div>

const itemInput = document.querySelector("input[type=text]");

itemInput.addEventListener("keydown", myEvent);

function myEvent(e) {

console.log(e.target.value);

document.querySelector(".output").innerText = e.target.value;

}

See video tutorial on YouTube :

https://youtu.be/4uDKxoBJCBs

And see this about JavaScript :

https://youtu.be/_BVkOvpyRI0