reactjs / reactjs/react-tabs

false warning about "'Tab' outside 'TabList'" when using Immutable seq

Open
#198 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
3.1k
Forks
455
Avg merge
5h 9m
Merged PRs (30d)
2

Description

import React from 'react';
import { OrderedMap } from 'immutable';
import { Tabs, Tab, TabList, TabPanel } from 'react-tabs';

const tabData = OrderedMap({
  one: '1',
  two: '2',
  three: '3',
});

export default function Test() {
  return <div>
    <Tabs>
      <TabList>
        {
          // This line triggers `Failed prop type: Found a 'Tab' component outside of the 'TabList' component. 'Tab' components have to be inside the 'TabList' component.`
          tabData.keySeq().map(key => <Tab key={key}>{key}</Tab>)
          // If change to use toArray() or toList(), the warning disappears.
          // tabData.keySeq().toArray().map(key => <Tab key={key}>{key}</Tab>) // no warning
          // tabData.keySeq().toList().map(key => <Tab key={key}>{key}</Tab>)  // no warning
        }
      </TabList>

      {
        tabData.entrySeq().map(([key, value]) => <TabPanel key={key}>{value}</TabPanel>)
      }
    </Tabs>
  </div>;
}

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the JSX reproduction with Immutable OrderedMap and react-tabs, then compare keySeq().map() with the toArray() and toList() variants shown in the issue. Trace the warning about Tab outside TabList and identify why only the Immutable sequence form triggers it. Done means the keySeq() example renders without the false warning while the tab panels still work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.