Prop Getters & State Reducer (Light)
Expose safe handlers with prop getters and allow parents to alter transitions via a light state reducer.
Prop Getters & State Reducer (Light) is a free React Academy lesson on CoddyKit — lesson 2 of 2. 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 2 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why getters + reducer
Goal: Make components flexible without complexity.
- Prop getters: return safe props (handlers/aria/classes) to spread
- State reducer: parent can alter transitions
- Beginner-friendly, small pieces
Getters: safe composition
- Expose getButtonProps(userProps)
- Merge handlers with a tiny callAll helper
- Add ARIA/state safely (e.g., aria-pressed)
Demo: prop getters
Prop getter returns merged props so parents can pass extra handlers without breaking internal ones.
<div id="root"></div>
Demo: reducer customization
A reducer prop lets parents customize transitions. Here we block toggling off once it is on.
<div id="root"></div>
Demo: merge user props
Parents can pass extra props (analytics, titles) with the getter safely merged.
<div id="root"></div>
Tips & pitfalls
- Keep getters small; add only safe defaults (e.g., aria-pressed)
- Reducer should return a state (pure function)
- Do not double-call user handlers; use a tiny callAll
Reducer pattern check
Recap
Recap: Prop getters safely merge handlers/props, and a light state reducer lets parents tweak transitions while your component stays simple.
Frequently asked questions
Is the “Prop Getters & State Reducer (Light)” lesson free?
Yes — the full text of “Prop Getters & State Reducer (Light)” is free to read here on the web, and the React Academy course includes 2 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 “Prop Getters & State Reducer (Light)”?
Expose safe handlers with prop getters and allow parents to alter transitions via a light state reducer. 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 2, so you can start here or from the beginning and move at your own pace.
How long does the “Prop Getters & State Reducer (Light)” 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
- Trade-offs; Ref Patterns; Default Values
- Prop Getters & State Reducer (Light)