ReactJS Program to Prop Drilling Cleanup with Explanation
ReactJS
Hard
Component Design
29 views
1 min read
88 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around prop, pass, react. Let’s break it down step by step so you can implement it confidently.
Problem Statement
Refactor a deep tree to pass only the props needed (no extra props).
Input Format
No input.
Output Format
Render a React component.
Constraints
Use small components and pass minimal props.
Code Solution
This explanation is written for learning purposes and to help beginners understand the concept clearly.
import React from 'react';
function Title({ text }) {
return <h1 style={{ margin: 0 }}>{text}</h1>;
}
function Subtitle({ text }) {
return <p style={{ margin: '8px 0 0 0', color: '#555' }}>{text}</p>;
}
function Header({ title, subtitle }) {
return (
<header style={{ border: '1px solid #eee', borderRadius: 14, padding: 14, width: 480 }}>
<Title text={title} />
<Subtitle text={subtitle} />
</header>
);
}
export default function App() {
return <Header title='meetcode' subtitle='Practice small questions daily.' />;
}
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
Refactor a deep tree to pass only the props needed (no extra props).
Input / Output
Output
Render a React component.
Constraints
Use small components and pass minimal props.
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 from 'react';
function Title({ text }) {
return <h1 style={{ margin: 0 }}>{text}</h1>;
}
function Subtitle({ text }) {
return <p style={{ margin: '8px 0 0 0', color: '#555' }}>{text}</p>;
}
function Header({ title, subtitle }) {
return (
<header style={{ border: '1px solid #eee', borderRadius: 14, padding: 14, width: 480 }}>
<Title text={title} />
<Subtitle text={subtitle} />
</header>
);
}
export default function App() {
return <Header title='meetcode' subtitle='Practice small questions daily.' />;
}
Solutions (0)
No solutions submitted yet. Be the first!
