Build an on/off toggle switch with controlled state.
01
01
Understand the problem
ReactStateUI
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
Solve in
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
04
React solution
Complete solutionRun Playground
import React, { useState } from 'react';
import ToggleSwitch from './src/ToggleSwitch';
const App = () => {
const [isToggled, setIsToggled] = useState(false);
const handleToggle = () => {
setIsToggled((prev) => !prev);
};
return (
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
<h1>Toggle Switch Demo</h1>
<ToggleSwitch isOn={isToggled} onToggle={handleToggle} />
<p style={{ marginTop: '20px', fontSize: '18px' }}>Current State: <strong style={{ color: isToggled ? 'green' : 'red' }}>{isToggled ? 'ON' : 'OFF'}</strong></p>
</div>
);
};
export default App;05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.