How to Use event.target in React: Simple Guide

In React, event.target refers to the element that triggered the event, such as a button or input field. You use it inside event handlers to get information like the element's value or attributes when the event occurs.

Syntax

The event.target is a property of the event object passed to event handlers in React. It points to the DOM element that fired the event.

• event: The event object React passes to your handler.
• target: The element that triggered the event.

javascript

function handleClick(event) {
  const clickedElement = event.target;
  console.log(clickedElement);
}

Output

Logs the DOM element that was clicked to the console.

Example

This example shows a React component with an input field and a button. When you type in the input or click the button, the event handler uses event.target to get the value or element clicked.

javascript

import React, { useState } from 'react';

export default function EventTargetExample() {
  const [inputValue, setInputValue] = useState('');
  const [clicked, setClicked] = useState('None');

  function handleInputChange(event) {
    setInputValue(event.target.value);
  }

  function handleButtonClick(event) {
    setClicked(event.target.textContent);
  }

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        aria-label="Type something"
      />
      <button onClick={handleButtonClick}>Click Me</button>
      <p>Input value: {inputValue}</p>
      <p>Button clicked: {clicked}</p>
    </div>
  );
}

Output

Shows an input box and a button. Typing updates 'Input value' below. Clicking the button updates 'Button clicked' with button text.

Common Pitfalls

One common mistake is assuming event.target always points to the element you attached the handler to. If the event bubbles, event.target can be a child element inside the handler's element.

To get the element with the handler, use event.currentTarget instead.

javascript

function handleClickWrong(event) {
  // This might log a child element, not the button itself
  console.log('event.target:', event.target);
  // This logs the element with the handler
  console.log('event.currentTarget:', event.currentTarget);
}

Output

Logs the actual clicked element and the element with the event handler, showing they can differ.

Quick Reference

Property	Description
event.target	The element that triggered the event (could be a child element)
event.currentTarget	The element the event handler is attached to
event.target.value	The value of an input or form element that triggered the event
Use in React	Access inside event handlers to get element info when events happen

Key Takeaways

Use event.target in React event handlers to access the element that triggered the event.

Remember event.target can be a child element; use event.currentTarget to get the element with the handler.

For input fields, event.target.value gives the current input value.

Always pass the event object to your handler to use event.target.

Use event.target to read attributes or values dynamically during user interactions.