const options = [

  {

    label: 'Home',

    slug: 'home',

    content: (<h2>Home Page</h2>)

  },

  {

    label: 'Photos',

    slug: 'photos',

    disabled: true,

    content: (<h2>Photos Page</h2>)

  },

  {

    label: 'Blog',

    slug: 'blog',

    content: (<h2>Blog Page</h2>)

  }

]

​

function App () {

  return (

    <Tabs options={options} selected="home" />

  )

}

​

function Tabs ({ options, selected }) {

  const defaultSelected = selected || options[0].slug

  const [selectedTabName, setSelectedTabName] = React.useState(defaultSelected)

  const selectedTab = React.useMemo(() => {

    return options.find(o => o.slug === selectedTabName)

  }, [options, selectedTabName])

  return (

    <div className="tabs-container">

      <TabsOptions options={options} selected={selectedTabName} onClick={setSelectedTabName} />

      {selectedTab.content}

    </div>