Layout Component With Props

Medium
6 views 25 Jan 2026
Create a Layout component that accepts header and footer content as props....

Style Props Merging

Medium
6 views 25 Jan 2026
Create a Box component that merges default styles with a style prop....

Reusable Alert Component

Easy
6 views 25 Jan 2026
Create an Alert component that supports success and error styles....

Keyed Fragment List

Hard
6 views 25 Jan 2026
Render a list where each item outputs two lines using a keyed Fragment....

Prop Drilling Cleanup

Hard
7 views 25 Jan 2026
Refactor a deep tree to pass only the props needed (no extra props)....

Conditional ClassName

Medium
6 views 25 Jan 2026
Add className based on prop without messy string building....

Render Only When Needed

Easy
6 views 25 Jan 2026
Create a component that returns null when there is nothing to show....

Small Component API Design

Medium
6 views 25 Jan 2026
Design a Notice component that accepts tone, title, and children content....

Keyboard Friendly Menu Button

Medium
7 views 25 Jan 2026
Create a menu button that toggles a list and supports keyboard focus style....

Reusable Spacer Component

Easy
7 views 25 Jan 2026
Create a Spacer component to add vertical space without magic numbers everywhere....

Split Layout Using Props

Hard
7 views 25 Jan 2026
Create a TwoColumn layout component with left and right props....

Safe HTML Rendering

Hard
9 views 25 Jan 2026
Render user text safely (do not use dangerouslySetInnerHTML)....

Component With Optional Footer

Medium
8 views 25 Jan 2026
Create a Card component that renders an optional footer when prop is provided....

Tooltip On Hover And Focus

Medium
7 views 25 Jan 2026
Build a tooltip that opens on hover and keyboard focus....

Stepper Progress Indicator

Medium
6 views 25 Jan 2026
Create a stepper UI that shows current step and completed steps....

Simple Header Component

Easy
6 views 25 Jan 2026
Build a header for meetcode with a brand on the left and links on the right....

Reusable Button Variants

Easy
6 views 25 Jan 2026
Create a Button component with variants: primary and ghost....

Card With Children Slot

Easy
5 views 25 Jan 2026
Make a Card component that accepts children and keeps the same look everywhere....

Avatar With Fallback

Medium
7 views 25 Jan 2026
Create an Avatar that shows an image, but falls back to initials if image is missing....

Conditional Banner

Easy
6 views 25 Jan 2026
Show a success banner only when a boolean prop is true....

List Rendering With Stable Keys

Medium
7 views 25 Jan 2026
Render a topic list and use stable keys instead of index....

Empty State Component

Medium
7 views 25 Jan 2026
Create an EmptyState component that shows a title, message, and an action button....

Badge Component With Color

Easy
7 views 25 Jan 2026
Make a Badge component that supports colors: green, gray, red....

Icon Only Button Accessibility

Medium
7 views 25 Jan 2026
Create an icon-only button that is accessible using aria-label....

Render Props Mini

Hard
6 views 25 Jan 2026
Create a component that provides mouse position using a render function prop....

Skeleton Loader Block

Easy
6 views 25 Jan 2026
Create a skeleton block component to show loading UI....

Breadcrumb Component

Medium
7 views 25 Jan 2026
Build a breadcrumb component like Home > Topics > React....

Pagination Buttons

Medium
7 views 25 Jan 2026
Create a pagination component with Prev/Next and current page text....

Table Row Component

Medium
7 views 25 Jan 2026
Create a small table component that renders rows from data....

Toggle Section Component

Hard
7 views 25 Jan 2026
Build a collapsible section using details/summary style but with React state....

Prop Validation Without Libraries

Easy
6 views 25 Jan 2026
Create a component that safely handles missing props using defaults....

Split Big Component

Medium
5 views 25 Jan 2026
Refactor by splitting a ProfileCard into Avatar and Details components....