Checkbox Group With Summary
ReactJS
Medium
5 views
Problem Description
Create a checkbox group and show a summary of selected values.
Output Format
Render a React component.
Constraints
Toggle selected values in an array.
Official Solution
import React, { useState } from 'react';
const topics = ['HTML', 'CSS', 'React', 'PHP'];
export default function App() {
const [selected, setSelected] = useState(['React']);
function toggle(name) {
setSelected((prev) => (prev.includes(name) ? prev.filter((x) => x !== name) : [...prev, name]));
}
return (
<div style={{ padding: 16 }}>
<h2 style={{ marginTop: 0 }}>meetcode interests</h2>
<div style={{ display: 'grid', gap: 8 }}>
{topics.map((t) => (
<label key={t} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<input type='checkbox' checked={selected.includes(t)} onChange={() => toggle(t)} />
{t}
</label>
))}
</div>
<div style={{ marginTop: 12, color: '#555' }}>Selected: {selected.join(', ') || 'None'}</div>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!