Skip to content
This repository has been archived by the owner on Dec 15, 2018. It is now read-only.

Why do nested fragments need to be wrapped in single child element? #252

Open
saltire opened this issue Dec 14, 2017 · 1 comment
Open

Comments

@saltire
Copy link

saltire commented Dec 14, 2017

When I want to nest fragments within another fragment, I have to wrap them in a container element or I will get the error: React.Children.only expected to receive a single React element child.

An example of nesting with an extra container <div>:

<Fragment forRoute='/'>
  <div>
    <Fragment forRoute='/'><Home /></Fragment>
    <Fragment forRoute='/about'><About /></Fragment>
    <Fragment forRoute='/messages'><Messages /></Fragment>
    <Fragment forRoute='/feed'><Feed /></Fragment>
  </div>
</Fragment>

Is there a reason why <Fragment> calls React.Children.only when it renders, and is there a way to remove this requirement without breaking anything? The extraneous wrapper divs can have unwanted effects on layout, especially when there are multiple levels of routing.

@RussianCow
Copy link

RussianCow commented Mar 7, 2018

For what it's worth, as of React 16 you can use React fragments to avoid creating a wrapper element:

<Fragment forRoute='/'>
  <React.Fragment>
    <Fragment forRoute='/'><Home /></Fragment>
    <Fragment forRoute='/about'><About /></Fragment>
    <Fragment forRoute='/messages'><Messages /></Fragment>
    <Fragment forRoute='/feed'><Feed /></Fragment>
  </React.Fragment>
</Fragment>

Having said that, I also wonder if there is any technical reason that a <Fragment> can only have a single child.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants