100 JS Functions

Beginner

1. CurrentYear

2. SimpleCounter

3. DoubleNumber

4. CreateColor

5. DynamicGrid

6. DynamicPictureSize

7. RandomButton

8. TabbedNavigation

9. MathOperator

10. GuessTheNumber

11. BetweenDates

12. Reactions

13. FeedTheBunny

14. Countdown

15. ClickFast

16. SkillsForJobs

17. UsersTabel

18. TodoList

19. UserSearch

20. SpendingInfo

8.TabbedNavigation

Write a React component named TabbedNavigation that renders tabs along with their associated content, and allows navigating between them.

This component will receive a prop named tabbedNavigationConfig with the following type:

TabbedNavigationConfig = {  
    id: string;  
    title: string;  
    content: JSX.Element;
}[]

This prop controls the tabs we will render. For each item in this Array we will render a tab button, and when clicking on it, we'll see the tab panel with the specific content inside.

See the demo below, for how the component should work if it receives the following input.

NOTE: The component should use appropriate ARIA roles for accessibility.

Example 1

Input

tabNavigation

=

Demo

Open demo in new window

You'll see test results here!