Checkbox Group With Summary

Checkbox Group With Summary

Medium ReactJS Forms & Validation 37 views
Explanation Complexity

Problem Statement

Create a checkbox group and show a summary of selected values.

Input Format

No input.

Output Format

Render a React component.

Constraints

Toggle selected values in an array.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Toggle selected values in an array.

Examples

Input:
Output:
(React code)

Example Solution (Public)

ReactJS 
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>
  );
}

Official Solution Code

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>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.