0Pricing
React Academy · Lesson

Event Handling: onClick & onChange

Handle user input with onClick and onChange; understand React’s synthetic events and read values safely.

Event Handling: onClick & onChange is a free React Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Events in React

Goal: Handle clicks and text changes using React's synthetic events for consistent behavior across browsers.

  • onClick triggers actions
  • onChange reads input values
  • Event object carries details

onClick essentials

Attach a handler: onClick={handle}. Keep functions small; update state with setters (prefer functional updater if using previous value).

onChange essentials

onChange fires when the user edits an input. Read text from event.target.value and keep state as the single source of truth.

Demo: clicks & input

Demo: increment on click, mirror input with onChange, and prevent form submit reload with event.preventDefault().


<div id="root"></div>

Synthetic events in practice

Synthetic events wrap native events for consistency. Read values inside the handler; keep handlers short and focused.

  • Use event.preventDefault() for forms
  • Use event.target.value for inputs

Tips & pitfalls

Tips:

  • Do not mutate DOM directly; let state drive UI.
  • Avoid inline heavy logic in handlers—call small functions.
  • Use functional updater when using previous state.

Reading input value

In an input onChange handler, where do you read the latest text value?

Recap

Recap: Use onClick for actions and onChange for inputs; read values from event.target.value; prevent default form reloads when needed.

Frequently asked questions

Is the “Event Handling: onClick & onChange” lesson free?

Yes — the full text of “Event Handling: onClick & onChange” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Event Handling: onClick & onChange”?

Handle user input with onClick and onChange; understand React’s synthetic events and read values safely. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Event Handling: onClick & onChange” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. useState Basics & Correct Updates
  2. Event Handling: onClick & onChange
  3. Controlled vs Uncontrolled Inputs (Intro)
← Back to React Academy