codejump
MediumPro challengeJavaScriptTypeScript

Compound Components

ReactPatternsContext

Build a Tab compound component:

  • Tabs({ activeIndex, children }) — provides activeIndex via context.
  • Tab({ index, label }) — reads activeIndex; returns '[label]' if active else 'label'.

solve(activeIndex, labels) renders tabs and returns array of rendered strings.

Sample tests

Test #1Active = 0
Input: [0,["Home","About","Contact"]]
Output: ["[Home]","About","Contact"]
Test #2Active = 1
Input: [1,["Home","About","Contact"]]
Output: ["Home","[About]","Contact"]
Test #3Active = 2
Input: [2,["Home","About","Contact"]]
Output: ["Home","About","[Contact]"]
Test #4No tab active
Input: [-1,["A"]]
Output: ["A"]
Test #5Single tab
Input: [0,["X"]]
Output: ["[X]"]
← All challenges