Set classNames of React Transition Group with stage

Question

I'm using React Transition Group. I have state classFade, and set classNames of React Transition Group = classFade. I want when I click to next button, classFade='fadeRight' and content will fade to the right. When I click to prev button, classFade='fadeLeft' and content will fade to the left. But react transition group takes the previous value, not the value after I pass it on. For example, when I clicked Next Button, it received my original classFade empty value, not 'fadeRight', only when click the next button again, will it succeed.

My stage:

const [items, setItems] = useState(
    { id: uuid(), text: 'Buy eggs', classFade: '' }
  );

React Transition Group:

<TransitionGroup>
  <CSSTransition
    key={items.id}
    timeout={500}
    classNames={items.classFade}
  >
    {items.text}
  </CSSTransition>
</TransitionGroup>

Example when click next button:

    setItems({
      id: uuid(),
      text,
      classFade: 'fadeRight',
    });

You can check full code and run demo here: https://codesandbox.io/s/transitiongroup-component-8x520

score 1 · Answer 1 · answered Feb 18 '20 at 04:10

My problem resolved in https://github.com/reactjs/react-transition-group/issues/182. They should be add this to docs -.-

//This returns a childFactory to provide to TransitionGroup
const childFactoryCreator = (classNames) => (
  (child) => (
    React.cloneElement(child, {
      classNames
    })
  )
);

<TransitionGroup
  childFactory={childFactoryCreator(condition ? "anim1" : "anim2)}
>
  <CSSTransition
     key={key}
     classNames={condition ? "anim1" : "anim2"}
  >
     //Item that gets transitioned goes here
  </CSSTransition>
</TransitionGroup>

Set classNames of React Transition Group with stage

1 Answers1