-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Error when using a single TabItem component within parent Tabs component #8591
Comments
Thanks for the report. Just curious: are you actually going to use a single tab item in production? Or is this just an annoyance for local development? |
@Josh-Cena Mostly the latter; however, I do have one project with a bunch of single tabs currently because I'm lazy and have only added content for Python instead of other languages, as referenced in the expected behavior for this bug -- when I mentioned "there are cases" I was really referencing that project with suboptimal tab use. |
+1 for 1 tab in Prod. I'm using this here: https://docs.flagsmith.com/clients/server-side#logging and IMHO this would be the most appropriate formatting, even tho 1 tab element sounds a bit odd, it works here. Screen Grab for if we modify the formatting waiting for this fix: |
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
Using a single
TabItem
component within a parentTabs
component causes aUncaught TypeError: children.map is not a function
error (this was not the case before the recent2.3.0
release, as far as I can tell).With the new release, if I visit
/docs/success
in the linked example repo, where twoTabItem
components are nested within a parentTabs
component, then everything works fine:If, however, I visit
/docs/fail
, where a singleTabItem
component is within a parentTabs
component, then the page crashes due to achildren.map is not a function
error:Inspecting the console makes it clear why this error is occurring:
After looking at the file containing the offending line of code, I decided to log
children
and the error became clear.With a single item:
With two items:
A very superficial hack "resolves" the problem (at least in terms of getting the page not to crash):
Reproducible demo
https://stackblitz.com/edit/github-wahvzn
Steps to reproduce
/docs/fail
. Then observe the success by visiting/docs/success
.Expected behavior
Continuity in terms of how
TabItem
components are rendered. Plurality should not matter. There are cases where it may be desirable to use a singleTabItem
withinTabs
such as illustrating how to do things in different coding languages but only having time in the moment to do so for a single language.Actual behavior
A page should not crash due to the presence of only a single
TabItem
withinTabs
. I can't imagine this was an intentional design decision (since this worked fine in previous versions).Your environment
Repro demo and source code (made using docusaurus.new): https://stackblitz.com/edit/github-wahvzn?file=docs/fail.md
Self-service
The text was updated successfully, but these errors were encountered: