import React from "react"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import { Wrapper } from "./styles"; function TabMenu({ content }) { const titles = []; const panels = []; content.map(item => { titles.push(item.title); panels.push(item.content); }); return ( <Wrapper> <Tabs> <TabList> {titles.map((item, i) => ( <Tab key={`tab-${i}`}>{item}</Tab> ))} </TabList> {panels.map((item, i) => ( <TabPanel key={`content-${i}`}>{item}</TabPanel> ))} </Tabs> </Wrapper> ); } export default TabMenu;