React-transition-group: React16 - TransitionGroup without a wrapping div

[mattkrick]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I have to pass in a custom component or custom styles that are child-aware

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/m4mb9Lg3/4/).

1. Render a component like: <div style={{width: '100%}}></div>
2. Now wrap it in a TransitionGroup
3. Notice the width is borked & you have to apply width: 100% to the TransitionGroup

What is the expected behavior?
I can add a transition by simply wrapping a component in TransitionGroup. Since React 16 allows you to return an array of elements, there's no need for a div. If backwards compatibility is desired, we could use special handling if component=null. Happy to PR if this has a chance of getting merged.

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
All versions

[jquense]

I'm happy to see if that works, but my inclination is it might cause issue. Feel free to PR something along the lines of component={null} with some tests/stories and i'm sure i'd accept it

[LKay]

You could use https://github.com/gajus/react-aux to have it both React 16 and prior versions compatible.

[agm1984]

Good call on the Aux. I recall it from Max's course on Udemy. Here is the gist:

const Aux = props => props.children

// Later that day,
<Aux>
  <Yolo />
  <Cat livesLeft={9}  />
</Aux>

[Epskampie]

For people finding this on google, from the docs:

If you use React v16+ and would like to avoid a wrapping <div> element
you can pass in component={null} on your TransitionGroup. This is useful if the wrapping div borks your css styles.

http://reactcommunity.org/react-transition-group/transition-group