Mobile Friendly Tabs Component For React

import React from 'react'; import ReactDOM from 'react-dom'; import Tabs from 'silk-tabs';  import 'silk-tabs/style/Tabs.css';  const numberOfTabs = 8; const tabs = [...new Array(numberOfTabs)].map((_, i) => `tab${i}`);  const Panels = [...new Array(numberOfTabs)].map((_, i) =>     (         <div key={i}>             <div className="myItem">{i}</div>         </div>     ) );  const tabPanelStyle = {     container: {         overflow: 'hidden',         visibility: 'hidden',         position: 'relative'     },     wrapper: {         overflow: 'hidden',         position: 'relative'     },     child: {         float: 'left',         width: '100%',         position: 'relative',         transitionProperty: 'transform',         height: '250px'     } }  const onChange = index => {     // Don't do costing things.     // Meybe you should not use this api,use transitionEnd instead.      console.log(`onChange:${index}`) } const transitionEnd = index => {     // You may do some costing things here instead of in onChange callback for better performance!      // fetch()     // render()      console.log(`transitionEnd:${index}`) }  const TabsExample = () => (     <div>         <Tabs             defaultIndex={2}             onChange={onChange}             transitionEnd={transitionEnd}             tabs={tabs}             tabPanelStyle={tabPanelStyle}             className="myTabs"         >             {Panels}         </Tabs>     </div> )