Handling User Events in React

User interfaces become interactive when they respond to user actions such as clicks and input changes.

In React, events are handled by passing functions to elements using special attributes like onClick and onChange.

For example, a button click can trigger a function:

function App() {
  function handleClick() {
    console.log("Button clicked");
  }

  return <button onClick={handleClick}>Click me</button>;
}

When the button is clicked, the function is executed.

You can also handle input changes:

function App() {
  function handleChange(event) {
    console.log(event.target.value);
  }

  return <input onChange={handleChange} />;
}

The event object contains information about the user action. For inputs, the current value is available as event.target.value.

Event handling allows your components to respond to user behavior and update the interface dynamically.