Events & Lists
Dashboard
Topic 4/10
Home › React › Events & Lists

🎯 Events & Lists

SyntheticEvents, form handling, list rendering with map(), and unique keys.

React SyntheticEvents

React wraps native browser events in a cross-browser `SyntheticEvent` wrapper for consistent behavior across all browsers.

Form Event Handling

Controlled components capture input change events and update React state.

LoginForm.jsx JSX 
import { useState } from 'react';

export function LoginForm() {
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form Submitted:', email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

Rendering Lists with map() and Keys

Transform arrays of data into JSX lists using `.map()`. Always supply a unique `key` prop to help React identify modified or reordered items.

TodoList.jsx JSX 
export function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.title} {todo.completed ? '✓' : ''}
        </li>
      ))}
    </ul>
  );
}