- Replace
<your_account>
with your Github username in the DEMO LINK - Follow the React task guideline
- Use React TypeScript cheat sheet
-
Your
App
component contains an array oftabs
const tabs = [ { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' }, { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' }, { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' }, ];
-
Save the
selectedTab
in theApp
(the first one by default) -
Implement the
Tabs
component acceptingtabs
as a prop and displaying a button per eachtab
and the content of the selected tab.Note: the content should have an attribute
data-cy="tab-content"
-
Pass the
selectedTabId
as a prop to theTabs
, the specified tab should be selected if possible (otherwise the first tab is selected) -
Pass the
onTabSelected
callback to theTabs
, it should be called whenever the user selects another tab. (Don't call the callback if the tab was not changed) -
The callback should receive the data of the selected tab (an object from the array)
-
Create an
h1
inside theApp
sayingSelected tab is Tab 1
(show the title of the selected tab) -
When the user selects another tab the
h1
should be updated accordingly -
The
Tabs
component should be stateless