> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/week-19/day-3-events-state-usestate/events.md).

# Events

In React, we add event handlers directly on a JSX element instead of using `addEventListener` using camelCased `on*` event attributes (i.e. `onClick`, `onSubmit`). The attribute value is the event handler and can either be an inline function or a reference to a named function.

**Inline function**

```jsx
<button onClick={() => alert('Button clicked')}>Click me</button>
```

**Named function reference**

```jsx
const handleClick = () => {
  alert('Button clicked');
};

<button onClick={handleClick}>Click me</button>
```

#### Event Object

Like in native JavaScript, event handlers in React also get passed an event object. This event object, however, is a `SyntheticEvent` object and not the native event object. The differences are few and subtle, we can treat the `SyntheticEvent` object as we would the native event object.

React's `SyntheticEvent` is a cross-browser wrapper around native events which ensures events work identically across supported browsers.

```jsx
const handleSubmit = (event) => {
  event.preventDefault();
  alert(`You searched for: ${event.target.query.value}`);
};

<form action="/search" onSubmit={handleSubmit}>
  <input type="text" name="query" />
  <input type="submit" value="Search" />
</form>
```

#### Events and Custom Components

**Event handlers will only work on JSX tags**. They won't work on custom React components.

This won't work as the `onSubmit` needs to be added to the `form` JSX tag:

```jsx
const SearchForm = () => {
  return (
    <form action="/search">
      <input type="text" name="query" />
      <input type="submit" value="Search" />
    </form>
  );
};

<SearchForm onSubmit={handleSubmit} />
```

In order for `handleSubmit` to work, we need to add the event handler to the `form` tag itself. The `handleSubmit` function is being passed to the `SearchForm` component as a prop named `onSubmit` so we already have a reference to the event handler we want.

```jsx
const SearchForm = (props) => {
  return (
    <form action="/search" onSubmit={props.onSubmit}>
      <input type="text" name="query" />
      <input type="submit" value="Search" />
    </form>
  );
};
```

#### Naming Conventions

In JSX tags, the attributes `onClick`, `onSubmit`, etc. are the actual event names so we can't change that. But, when we pass event handlers as props to custom components, we can give those different names.

```jsx
const SearchForm = (props) => {
  return (
    <form action="/search" onSubmit={props.onSearch}>
      <input type="text" name="query" />
      <input type="submit" value="Search" />
    </form>
  );
};

const handleSearch = (event) => {
  event.preventDefault();
  alert(`You searched for: ${event.target.query.value}`);
};

<SearchForm onSearch={handleSearch} />
```