Back to case studies
ReactFundamental
Composing components with children prop
Scenario
Context A UI library needs a generic Card wrapper component that can wrap any content passed to it. The Problem The current Card component only accepts a title prop and hard-codes its inner content, making it impossible to reuse with different layouts. Constraints Use the children prop to render arbitrary nested content. Apply consistent wrapper styles (border, padding, shadow) in the Card. Demonstrate usage with at least two different inner contents. Expected Deliverable A React Card component using the children prop as a flexible content slot, demonstrating composition with different inner elements.
Targeted skills
reactchildrencompositionpropsreusability