Implement the App and Tabs components to render and switch between given tabs.
Here is the working version
- Save the
selectedTabIdin theApp(the firsttabis selected by default); - Implement the
Tabscomponent acceptingtabsas a prop and displaying a link per eachtaband the content of the selected tab. - Each link should have a href with a
#tab-id(see the markup). - Pass the
selectedTabIdas a prop to theTabs, the specified tab should be selected if possible (otherwise, the first tab is selected). - The
Tabsshould show the content of the selected tab (add an attributedata-cy="tab-content"for testing). - The selected tab (
li) should have anis-activeclass. - Pass the
onTabSelectedcallback 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
Apptitle (h1) should show a text sayingSelected tab is Tab 1(show the title of the selected tab). - When the user selects another tab the
h1should be updated accordingly. - The
Tabscomponent 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 testto ensure your solution is correct. - Replace
<your_account>with your Github username in the DEMO LINK and add it to the PR description.