Warming up the neural circuits...
React events are similar to events, but with camelCase naming and JSX syntax:
| DOM Event | React Event |
|---|---|
onclick | onClick |
onchange | onChange |
onsubmit | onSubmit |
onkeydown | onKeyDown |
onmouseenter | onMouseEnter |
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return <button onClick={handleClick}>Clicked {count} times</button>;
}Important: Pass the function, not the result:
// ✅ Right — passes the function
<button onClick={handleClick}>Click</button>
// ❌ Wrong — calls the function immediately!
<button onClick={handleClick()}>Click</button>function UserList() {
const deleteUser = (id) => {
console.log("Delete user", id);
};
return (
<ul>
{users.map(user => (
function LoginForm() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = (e) => {
e.
onClick, onChange, onSubmite.preventDefault() on formse.target.value for values