React Events

React Events let your app respond to user actions - clicks, typing, hovering, and more!

What are Events?

Events happen when users interact with your app:

- **Click** a button - **Type** in an input - **Hover** over an image - **Submit** a form

React makes handling these super easy!

Click Events

The most common event is `onClick`:

```javascript function ClickButton() { const handleClick = () => { alert('Button clicked!'); };

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

### Shorter Version

```javascript <button onClick={() => alert('Clicked!')}> Click Me </button> ```

Common Events

### onClick - Button Clicks

```javascript function App() { return ( <button onClick={() => console.log('Clicked!')}> Click Me </button> ); } ```

### onChange - Input Changes

```javascript function SearchBox() { const handleChange = (event) => { console.log('User typed:', event.target.value); };

return ( <input type="text" onChange={handleChange} placeholder="Search..." /> ); } ```

### onSubmit - Form Submit

```javascript function LoginForm() { const handleSubmit = (event) => { event.preventDefault(); // Don't reload page console.log('Form submitted!'); };

return ( <form onSubmit={handleSubmit}> <input type="text" /> <button type="submit">Login</button> </form> ); } ```

### onMouseEnter & onMouseLeave - Hover

```javascript function HoverCard() { return ( <div onMouseEnter={() => console.log('Mouse entered')} onMouseLeave={() => console.log('Mouse left')} > Hover over me! </div> ); } ```

Events with State

Events usually update state:

```javascript function Counter() { const [count, setCount] = useState(0);

return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}> Increase </button> <button onClick={() => setCount(count - 1)}> Decrease </button> <button onClick={() => setCount(0)}> Reset </button> </div> ); } ```

Passing Arguments to Event Handlers

Sometimes you need to pass data to your event handler:

```javascript function ButtonList() { const handleClick = (buttonName) => { alert(`You clicked ${buttonName}`); };

return ( <div> <button onClick={() => handleClick('Button 1')}> Button 1 </button> <button onClick={() => handleClick('Button 2')}> Button 2 </button> </div> ); } ```

Getting Input Values

```javascript function NameInput() { const [name, setName] = useState('');

const handleChange = (event) => { setName(event.target.value); };

return ( <div> <input type="text" value={name} onChange={handleChange} /> <p>Hello, {name}!</p> </div> ); } ```

Preventing Default Behavior

Some events have default behavior (like form submission reloading the page). Prevent it with `event.preventDefault()`:

```javascript function ContactForm() { const handleSubmit = (event) => { event.preventDefault(); console.log('Form submitted without page reload!'); };

return ( <form onSubmit={handleSubmit}> <input type="email" placeholder="Your email" /> <button type="submit">Send</button> </form> ); } ```

Complete Example - Todo Input

```javascript function TodoInput() { const [task, setTask] = useState(''); const [todos, setTodos] = useState([]);

const handleSubmit = (event) => { event.preventDefault(); if (task.trim()) { setTodos([...todos, task]); setTask(''); // Clear input } };

return ( <div> <form onSubmit={handleSubmit}> <input value={task} onChange={(e) => setTask(e.target.value)} placeholder="Add a task" /> <button type="submit">Add</button> </form> <ul> {todos.map((todo, index) => ( <li key={index}>{todo}</li> ))} </ul> </div> ); } ```

Event Naming Convention

React events use camelCase (not lowercase):

- ❌ `onclick` (HTML) - ✅ `onClick` (React)

- ❌ `onchange` - ✅ `onChange`

Remember

- Events respond to user actions - Use onClick for button clicks - Use onChange for inputs - Use onSubmit for forms - Use event.preventDefault() to stop default behavior - Combine events with state for interactive apps

> Next: Learn React Lists - Display arrays of data!