- 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 link per eachtab
and the content of the selected tab - 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