Component for TransitionGroup

Question

I'm trying to create a reuseable component for <TransitionGroup> but not sure where to place the {children} .

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

const TransitionFade = ({ children }) => {

    return(
        <TransitionGroup>
            <CSSTransition in={true} appear={true} timeout={700} classNames="fade">
                {children}
            </CSSTransition>
        </TransitionGroup>
    );

}

export default TransitionFade;

Answer 1

I probably don't understand your question 100% (it could include more detail), but perhaps you were looking for something like this, ie, use the fade effect on each child separately, not just as a whole?

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

const TransitionFade = ({ children }) => {
  return(
    <TransitionGroup>
      { React.Children.map(children, child => 
          (<CSSTransition in={true} appear={true} timeout={700} classNames="fade">
            {child}
          </CSSTransition>)
        )
      }
    </TransitionGroup>
  );

}

export default TransitionFade;

Seems like a neat idea, since there are many contexts in which one would like to add or remove children from a list or similar. I might start using this already.