ReactJS Program to Small Component API Design with Explanation
ReactJS
Medium
Component Design
22 views
1 min read
85 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around component, design, react. Let’s break it down step by step so you can implement it confidently.
Problem Statement
Design a Notice component that accepts tone, title, and children content.
Input Format
No input.
Output Format
Render a React component.
Constraints
Keep props clear and simple.
Code Solution
This explanation is written for learning purposes and to help beginners understand the concept clearly.
import React from 'react';
function Notice({ tone = 'info', title, children }) {
const tones = {
info: { bg: '#f3f4f6', border: '#e5e7eb', text: '#111' },
success: { bg: '#eafaf1', border: '#b7f0d0', text: '#0b5' },
warning: { bg: '#fff2b2', border: '#f0d36c', text: '#6b4f00' }
};
const t = tones[tone] || tones.info;
return (
<section style={{ background: t.bg, border: '1px solid ' + t.border, color: t.text, borderRadius: 14, padding: 14, width: 520 }}>
<strong>{title}</strong>
<div style={{ marginTop: 8 }}>{children}</div>
</section>
);
}
export default function App() {
return (
<div style={{ padding: 16 }}>
<Notice tone='success' title='meetcode saved'>
<p style={{ margin: 0 }}>Your progress is updated.</p>
</Notice>
</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
Design a Notice component that accepts tone, title, and children content.
Input / Output
Output
Render a React component.
Constraints
Keep props clear and 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).
Difficulty
Medium
ReactJS
Official Solution
import React from 'react';
function Notice({ tone = 'info', title, children }) {
const tones = {
info: { bg: '#f3f4f6', border: '#e5e7eb', text: '#111' },
success: { bg: '#eafaf1', border: '#b7f0d0', text: '#0b5' },
warning: { bg: '#fff2b2', border: '#f0d36c', text: '#6b4f00' }
};
const t = tones[tone] || tones.info;
return (
<section style={{ background: t.bg, border: '1px solid ' + t.border, color: t.text, borderRadius: 14, padding: 14, width: 520 }}>
<strong>{title}</strong>
<div style={{ marginTop: 8 }}>{children}</div>
</section>
);
}
export default function App() {
return (
<div style={{ padding: 16 }}>
<Notice tone='success' title='meetcode saved'>
<p style={{ margin: 0 }}>Your progress is updated.</p>
</Notice>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
