Handling List Events

You can handle events like onClick on each item in a list by passing an event handler inside map().

function TodoList({ todos, deleteTodo }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => deleteTodo(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

• Arrow functions inside map() allow passing parameters to event handlers.
• This pattern is commonly used in dynamic lists like to-do apps.