Select All Checkbox
ReactJS
Medium
6 views
Problem Description
Build a list of checkboxes with a Select All control.
Output Format
Render a React component.
Constraints
Keep selected ids in state and derive Select All checked state.
Official Solution
import React, { useMemo, useState } from 'react';
const base = [
{ id: 'a11y', label: 'Accessibility' },
{ id: 'hooks', label: 'Hooks' },
{ id: 'forms', label: 'Forms' },
{ id: 'perf', label: 'Performance' }
];
export default function App() {
const [selected, setSelected] = useState(() => new Set());
const allSelected = useMemo(() => selected.size === base.length, [selected]);
function toggleAll() {
setSelected(() => {
if (allSelected) return new Set();
return new Set(base.map((x) => x.id));
});
}
function toggleOne(id) {
setSelected((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
}
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode filters</h2>
<label style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
<input type='checkbox' checked={allSelected} onChange={toggleAll} />
Select all
</label>
<div style={{ marginTop: 12, display: 'grid', gap: 8 }}>
{base.map((x) => (
<label key={x.id} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
<input type='checkbox' checked={selected.has(x.id)} onChange={() => toggleOne(x.id)} />
{x.label}
</label>
))}
</div>
<div style={{ marginTop: 12, color: '#555' }}>Selected: {Array.from(selected).join(', ') || 'None'}</div>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!