ReactJS Program to Toggle Section Component with Explanation
ReactJS
Hard
Component Design
31 views
1 min read
86 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around react, section, component. Let’s break it down step by step so you can implement it confidently.
Problem Statement
Build a collapsible section using details/summary style but with React state.
Input Format
No input.
Output Format
Render a React component.
Constraints
Animate is optional. Keep logic simple.
Code Solution
This explanation is written for learning purposes and to help beginners understand the concept clearly.
import React, { useState } from 'react';
function Collapsible({ title, children }) {
const [open, setOpen] = useState(false);
return (
<section style={{ border: '1px solid #eee', borderRadius: 14, padding: 12, width: 420 }}>
<button type='button' onClick={() => setOpen((v) => !v)} style={{ width: '100%', textAlign: 'left', border: 0, background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<strong>{title}</strong>
<span aria-hidden='true'>{open ? '−' : '+'}</span>
</button>
{open ? <div style={{ marginTop: 10 }}>{children}</div> : null}
</section>
);
}
export default function App() {
return (
<Collapsible title='What is meetcode?'>
<p style={{ margin: 0 }}>A place to practice small coding questions.</p>
</Collapsible>
);
}
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 a collapsible section using details/summary style but with React state.
Input / Output
Output
Render a React component.
Constraints
Animate is optional. Keep logic simple.
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).
Official Solution
import React, { useState } from 'react';
function Collapsible({ title, children }) {
const [open, setOpen] = useState(false);
return (
<section style={{ border: '1px solid #eee', borderRadius: 14, padding: 12, width: 420 }}>
<button type='button' onClick={() => setOpen((v) => !v)} style={{ width: '100%', textAlign: 'left', border: 0, background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<strong>{title}</strong>
<span aria-hidden='true'>{open ? '−' : '+'}</span>
</button>
{open ? <div style={{ marginTop: 10 }}>{children}</div> : null}
</section>
);
}
export default function App() {
return (
<Collapsible title='What is meetcode?'>
<p style={{ margin: 0 }}>A place to practice small coding questions.</p>
</Collapsible>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
