Tab pane functional components and separation of concern

[henrymcl]

Bug Report

Steps

Minimal demo:

// imports omitted
function Tab1() {
  const [state, setState] = useState(null);
  return <h1>Minimal Test</h1>;
}

function Tab2() {
  return <h2>Minimal Test</h2>;
}

export function Test() {
  const [activeIndex, setActiveIndex] = useState(0);
  const panes = useMemo(
    () => [
      { menuItem: 'Tab 1', render: Tab1 },
      { menuItem: 'Tab 2', render: Tab2 },
    ],
    []
  );
  const tabChange = useCallback((event, props) => {
    if (props.value) {
      setActiveIndex(+props.value);
    }
  }, []);

  return <Tab panes={panes} activeIndex={activeIndex} onTabChange={tabChange} />;
}

Expected Result

Render properly

Actual Result

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Version

2.1.5 (latest)

Testcase

CodeSandbox doesn't even allow sharing anymore.

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[henrymcl]

Resolved with

const panes = useMemo(
    () => [
      { menuItem: 'Tab 1', render: ()=><Tab1/> },
      { menuItem: 'Tab 2', render: ()=><Tab2/> },
    ],
    []
  );