Checkbox Group Minimum
ReactJS
Hard
6 views
Problem Description
Build a checkbox group where user must pick at least one option.
Output Format
Render a React component.
Constraints
Track selected items in state and validate on submit.
Official Solution
import React, { useMemo, useState } from 'react';
const topics = ['React', 'CSS', 'HTML', 'PHP'];
export default function App() {
const [selected, setSelected] = useState(() => new Set());
const [submitted, setSubmitted] = useState(false);
const error = useMemo(() => submitted && selected.size === 0 ? 'Pick at least one topic' : '', [submitted, selected]);
function toggle(t) {
setSelected((prev) => {
const next = new Set(prev);
if (next.has(t)) next.delete(t);
else next.add(t);
return next;
});
}
function submit(e) {
e.preventDefault();
setSubmitted(true);
if (selected.size === 0) return;
alert('Saved topics on meetcode: ' + Array.from(selected).join(', '));
}
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>Pick topics</h2>
<form onSubmit={submit}>
<div style={{ display: 'grid', gap: 8 }}>
{topics.map((t) => (
<label key={t} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
<input type='checkbox' checked={selected.has(t)} onChange={() => toggle(t)} />
{t}
</label>
))}
</div>
{error ? <div style={{ marginTop: 10, color: '#c1121f' }}>{error}</div> : null}
<button type='submit' style={{ marginTop: 12, padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Save</button>
</form>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!