ReactJS Program to Accordion Open Set with Explanation
ReactJS
Medium
State Management
27 views
1 min read
89 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around open, accordion, set. Let’s break it down step by step so you can implement it confidently.
Problem Statement
Build an accordion where multiple sections can be open at once.
Input Format
No input.
Output Format
Render a React component.
Constraints
Store open ids in a Set and toggle on click.
Code Solution
This explanation is written for learning purposes and to help beginners understand the concept clearly.
import React, { useState } from 'react';
const items = [
{ id: 'what', title: 'What is meetcode?', body: 'A small practice site with quick questions.' },
{ id: 'how', title: 'How to use it?', body: 'Pick a topic, solve, then read the explanation.' },
{ id: 'why', title: 'Why daily?', body: 'Small steps create strong fundamentals.' }
];
function Panel({ open, title, body, onToggle }) {
return (
<section style={{ border: '1px solid #eee', borderRadius: 14, padding: 12 }}>
<button type='button' onClick={onToggle} style={{ width: '100%', textAlign: 'left', border: 0, background: 'transparent', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<strong>{title}</strong>
<span aria-hidden='true'>{open ? '−' : '+'}</span>
</button>
{open ? <div style={{ marginTop: 10, color: '#555' }}>{body}</div> : null}
</section>
);
}
export default function App() {
const [openIds, setOpenIds] = useState(() => new Set(['what']));
function toggle(id) {
setOpenIds((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: 560, display: 'grid', gap: 10 }}>
<h2 style={{ margin: 0 }}>meetcode accordion</h2>
{items.map((x) => (
<Panel key={x.id} open={openIds.has(x.id)} title={x.title} body={x.body} onToggle={() => toggle(x.id)} />
))}
</div>
);
}
Output Example
No sample I/O is provided for this question.
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Solution Guide
Problem
Build an accordion where multiple sections can be open at once.
Input / Output
Output
Render a React component.
Constraints
Store open ids in a Set and toggle on click.
Details
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Difficulty
Medium
ReactJS
Official Solution
import React, { useState } from 'react';
const items = [
{ id: 'what', title: 'What is meetcode?', body: 'A small practice site with quick questions.' },
{ id: 'how', title: 'How to use it?', body: 'Pick a topic, solve, then read the explanation.' },
{ id: 'why', title: 'Why daily?', body: 'Small steps create strong fundamentals.' }
];
function Panel({ open, title, body, onToggle }) {
return (
<section style={{ border: '1px solid #eee', borderRadius: 14, padding: 12 }}>
<button type='button' onClick={onToggle} style={{ width: '100%', textAlign: 'left', border: 0, background: 'transparent', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<strong>{title}</strong>
<span aria-hidden='true'>{open ? '−' : '+'}</span>
</button>
{open ? <div style={{ marginTop: 10, color: '#555' }}>{body}</div> : null}
</section>
);
}
export default function App() {
const [openIds, setOpenIds] = useState(() => new Set(['what']));
function toggle(id) {
setOpenIds((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: 560, display: 'grid', gap: 10 }}>
<h2 style={{ margin: 0 }}>meetcode accordion</h2>
{items.map((x) => (
<Panel key={x.id} open={openIds.has(x.id)} title={x.title} body={x.body} onToggle={() => toggle(x.id)} />
))}
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
