React Events Forms — Free React Tutorial
Learn React Events Forms in React with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
TL;DR: Learn React Events Forms in React with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated
React Events Forms in React
React events work similarly to DOM events but with some differences. Instead of `onclick`, you use `onClick` (camelCase). Event handlers receive a synthetic event object that wraps the native browser event. Common events include `onClick`, `onChange`, `onSubmit`, `onFocus`, and `onBlur`. Attach event handlers as JSX attributes on elements: `<button onClick={handleClick}>Click me</button>`.
Handling form inputs in React requires tracking the input value in state. When the user types in an input field, the `onChange` event fires and you update state with the new value. This creates a "controlled component" where React state is the single source of truth for the input value. To prevent the default form submission behavior, call `event.preventDefault()` in the `onSubmit` handler.
Forms in React are "controlled" because React state controls the input values, not the DOM directly. When you need to read form data, retrieve it from state, not by querying the DOM. This pattern makes forms predictable and makes it easy to validate input or react to changes in real-time.
Learn React Events Forms step by step with Syllab's free interactive React tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full React course →