other.js

import * as React from "react";

const { useState } = React;

const Tab = ({
  disabled = false,
  children,
  style,
  isCurrent = false,
  onClick
}) => {
  const [highlighted, setHighlight] = useState(false);
  const [selected, setSelect] = useState(isCurrent);

  // if we have an `isCurrent` we are being controlled, so ignore
  // our state and use the prop
  const _selected = isCurrent != null ? isCurrent : selected;

  const tabStyle = {
    paddingBottom: 4,
    display: "block",
    borderBottomStyle: "solid",
    borderBottomWidth: 2,
    borderBottomColor: _selected && !disabled ? "black" : "transparent",
    color: _selected && !disabled ? "black" : "gray"
  };

  const clickHandler = () => {
    // if we are not being controlled, set our state
    if (isCurrent == null) setSelect(!selected);
    if (onClick) onClick();
  };
  return (
    <div
      disabled={disabled}
      style={style}
      onMouseOver={() => setHighlight(true)}
      onMouseOut={() => setHighlight(false)}
      onClick={() => clickHandler()}
      hover={highlighted}
    >
      {isCurrent.toString()}
      {_selected.toString()}
      <div style={tabStyle}>{React.Children.only(children)}</div>
    </div>
  );
};

export default Tab;