Day 5: Events and Forms in React.js
We will learn how to handle events and forms in React.js. You’ll often need to capture user actions—like button clicks, typing in text fields, or submitting forms. In React, this is done using events. Today, we’ll explore onClick, onChange, and controlled inputs that update state in real time.
What are Events in React.js?
Think of events as signals that happen in your app.
- When you click a button, React says: “Hey, a click just happened!”
- When you type in a text box, React says: “Hey, the input changed!”
We can “listen” to these signals using event handlers.
In plain HTML/JS, you might write something like:
<button onclick="doSomething()">Click Me</button>In React.js, event handling looks a little different.
- Events are written in camelCase (
onClick, notonclick). - You pass a function, not a string.
Example:
function App() {
function handleClick() {
alert("Button clicked!");
}
return (
<button onClick={handleClick}>Click Me</button>
);
}Handling onClick
The onClick event is triggered when a user clicks a button, div, or any clickable element.
Example:
export default function Counter() {
const [count, setCount] = React.useState(0);
return (
<div className="text-center mt-10">
<p className="text-xl mb-4">Count: {count}</p>
<button
className="px-4 py-2 bg-blue-600 text-white rounded"
onClick={() => setCount(count + 1)}
>
Increase
</button>
</div>
);
}Here, each click updates the count state.
Handling onChange
When you type inside an input field, the onChange event fires. It lets you capture what the user is typing in real time.
Example:
export default function InputBox() {
const [text, setText] = React.useState("");
return (
<div className="text-center mt-10">
<input
type="text"
className="border p-2 rounded"
placeholder="Type something..."
onChange={(e) => setText(e.target.value)}
/>
<p className="mt-4">You typed: {text}</p>
</div>
);
}Here, as you type, the state updates and instantly shows the text below.
Controlled Inputs in Forms
A controlled input means the input’s value is controlled by React state. This is the standard way to handle forms in React.js.
Example:
export default function FormExample() {
const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const handleSubmit = (e) => {
e.preventDefault(); // prevent page refresh
alert(`Name: ${name}, Email: ${email}`);
};
return (
<form
onSubmit={handleSubmit}
className="flex flex-col items-center gap-4 mt-10"
>
<input
type="text"
placeholder="Enter your name"
className="border p-2 rounded"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="email"
placeholder="Enter your email"
className="border p-2 rounded"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button className="px-4 py-2 bg-green-600 text-white rounded">
Submit
</button>
</form>
);
}Here, both inputs are controlled by React state. When the user types, state updates immediately.
Key Takeaways
- React events use camelCase (
onClick,onChange). - Always pass a function, not a string, to event handlers.
onClickis great for button actions.onChangeis used for input fields.- Controlled inputs keep the UI in sync with state.
With these basics, you can now build dynamic forms that respond instantly to user input.
👉 Up Next (Day 6): We’ll explore Conditional Rendering in React.js—how to show or hide UI based on state.
