Implement the App
and Tabs
components to render and switch between given tabs
.
Here is the working version
- Save the
selectedTabId
in theApp
(the firsttab
is selected by default); - Implement the
Tabs
component acceptingtabs
as a prop and displaying a link per eachtab
and the content of the selected tab. - Each link should have a href with a
#tab-id
(see the markup). - Pass the
selectedTabId
as a prop to theTabs
, the specified tab should be selected if possible (otherwise, the first tab is selected). - The
Tabs
should show the content of the selected tab (add an attributedata-cy="tab-content"
for testing). - The selected tab (
li
) should have anis-active
class. - 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)
- The
App
title (h1
) should show a text 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 (don't have an internal state, only props).
- Implement a solution following the React task guideline.
- Open one more terminal and run tests with
npm test
to ensure your solution is correct. - Replace
<your_account>
with your Github username in the DEMO LINK and add it to the PR description.