Replymessage unavailable
element onMouseMove Mouse movement
Example: div onMouseEnter={() => console.log("Hovered") } >
Hover Me div> Keyboard Events Keyboard interactions are common in search boxes and forms.
Examples: input onKeyDown={(event) => console.log(event.key) } /> If user presses: Enter Output: Enter Common keyboard events:
* onKeyDown
* onKeyUp Form Handling in React Forms are one of the most important parts of frontend development.
Example: function LoginForm(){ function handleSubmit(event){ event.preventDefault(); console.log("Submitted"); } return ( form onSubmit={handleSubmit}> button>
Login button> form> ); } Preventing Default Behavior HTML forms refresh the page by default after submission.
React applications usually prevent this.
Example: event.preventDefault(); This allows React to handle the form submission without refreshing the browser.
Common use cases:
* Login forms
* Registration forms
* Search forms
* Payment forms Controlled Components React forms usually follow a pattern called Controlled components pattern.
The React state becomes the single source of truth.
Example: function Login(){ const [email,setEmail] = useState(""); return ( input value={email} onChange={(e)=> setEmail(e.target.value)} /> ); } Flow: User Types
|
↓
onChange Event
|
↓
Update State
|
↓
Component Re-renders
|
↓
Updated Value Displayed Handling Multiple Inputs Real applications usually contain multiple fields.
Example: const [form,setForm] = useState({ email:"", password:"" }); Updating: setForm({ ...form, email:e.target.value }); The spread operator preserves existing values. Event Bubbling Events can travel from child elements to parent elements.
Example: div onClick={parentClick}> button onClick={childClick}>
Click button> div> Clicking the button triggers: Button Click
|
↓
Parent Click This is called: Event Bubbling Stopping Event Propagation Sometimes you don't want the event to reach the parent.
Use: event.stopPropagation(); Example: function buttonClick(event){ event.stopPropagation(); } Real-World Example: Banking Application Consider a fund transfer screen: Enter Amount
|
↓
onChange Event
|
↓
Update State
|
↓
Click Transfer Button
|
↓
onClick Event
|
↓
Validate Data
|
↓
Call API
|
↓
Show Success Message Every user interaction is managed through React events. Common Mistakes Calling Functions Immediately ❌ onClick={save()} ✅ onClick={save} Mutating State Directly ❌ count++; ✅ setCount(count+1); Forgetting preventDefault() Forms may refresh unexpectedly. Creating Too Many Inline Functions Example: button onClick={() => handleDelete(id) } >
Delete button> This is acceptable for small cases.
For large lists, consider optimization techniques later in this series. Best Practices * Keep event handlers meaningful.
* Move complex logic into separate functions.
* Use controlled components for forms.
* Prevent unnecessary re-renders.
* Use semantic event names.
* Keep components focused. Key Takeaways Today, we learned:
✅ React handles events using JSX syntax.
✅ Event names use camelCase.
✅ Functions should be passed, not immediately executed.
✅ React uses Synthetic Events for consistency.
✅ Forms are commonly managed using controlled components.
✅ Event propagation can be controlled using stopPropagation. Coming Next 🚀 In Day 10, we will explore: Conditional Rendering in React – Building Dynamic Interfaces We will learn:
* Rendering elements conditionally
* if/else patterns
* Ternary operators
* Logical AND rendering
* Conditional components
* Authentication-based UI
* Real-world dashboard examples
Conditional rendering is one of the most frequently used concepts in production React applications.
Happy Coding! 🚀