React · Lesson 5 of 7
Events & forms
Handling clicks and input, and building controlled form fields.
React events use camelCase props: onClick, onChange, onSubmit. Pass a function, don't call it: onClick={save}, not onClick={save()}.
Controlled inputs
In a controlled input, React state is the single source of truth: the input's value comes from state, and onChange updates that state. This makes validation and resetting easy.
Call e.preventDefault() in onSubmit to stop the browser reloading the page.
Try it yourself
Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.
Key points
- Pass handlers, don't call them.
- Controlled input: value + onChange from state.
- preventDefault in onSubmit.
Quick check
Which is correct for a click handler?
Pass the function itself; save() would run immediately during render.
Practice task
Add a ‘Years of experience’ number field and disable Apply until it is 0 or more.
Interview corner
Controlled vs uncontrolled inputs?
Controlled inputs keep their value in React state. Uncontrolled inputs keep it in the DOM and you read it with a ref when needed.
Why does onClick={handle()} cause problems?
It calls handle during render and passes its return value as the handler — often causing loops if it sets state.
Further reading
Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.
Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.