Project 9: Travel Destination Page

React Engineer

Builds on these lessons

Compound Components Controlled Uncontrolled Components Render Props Composition Patterns Slot Pattern

Step 1 of 3

Project

Compound Components

Build a Tabs component with Tabs.List and Tabs.Panel as attached sub-components sharing implicit state through context. Compound components let the consumer arrange the pieces themselves — <Tabs><Tabs.List/><Tabs.Panel/></Tabs> — while the parent quietly coordinates them.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

function Tabs({ children }) {
  return <div className="tabs">{children}</div>;
}

Tabs.List = function TabsList({ children }) {
  return <div className="tabs-list">{children}</div>;
};

Tabs.Panel = function TabsPanel({ children }) {
  return <div className="tabs-panel">{children}</div>;
};

export default function DestinationPage() {
  return (
    <Tabs>
      <Tabs.List>Overview | Photos | Reviews</Tabs.List>
      <Tabs.Panel>Kyoto in autumn is unforgettable.</Tabs.Panel>
    </Tabs>
  );
}

← Previous Next →