yatania / react_tabs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Tabs

Task

  1. Your App component contains an array of tabs
    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' },
    ];
  2. Save the selectedTab in the App (the first one by default)
  3. Implement the Tabs component accepting tabs as a prop and displaying a link per each tab and the content of the selected tab
  4. Pass the selectedTabId as a prop to the Tabs, the specified tab should be selected if possible (otherwise the first tab is selected)
  5. Pass the onTabSelected callback to the Tabs it should be called whenever the user selects another tab. (Don't call the callback if the tab was not changed)
  6. The callback should receive the data of the selected tab (an object from the array)
  7. Create an h1 inside the App saying Selected tab is Tab 1 (show the title of the selected tab)
  8. When the user selects another tab the h1 should be updated accordingly
  9. The Tabs component should be stateless

tabs

About


Languages

Language:JavaScript 73.5%Language:HTML 24.5%Language:SCSS 2.0%