Animation only on new item, and wrong animation

[sinnbeck]

I am trying to upgrade react and I am therefor using nodeRef now. The animation was working correctly in the old version.

I am showing a page with a question, and when the question is answered, it should make a transition to the new question by moving the current question to the left side of the screen and moving the new one in from the right side.

But it adds the new question on top of the old one, and animates that one leaving the page and does no animation to the original one

As far as I understand from the docs, I should just give it a key and a reference to the node.

<TransitionGroup>
    <CSSTransition
        key={questionId}
        nodeRef={nodeRef}
        classNames="questionSection"
        timeout={{enter: 500, exit: 500}}
        unmountOnExit
        onExit={removeFinishButton}
        onEntered={handlePageEnter}
    >
        <div className="questionSection" ref={nodeRef}>
            <QuestionSection
                finishPageActive={finishPageActiveComputed}
                questionId={questionId}
            />
        </div>
    </CSSTransition>
</TransitionGroup>

Does anyone know of way to fix this ? Do I somehow need to pre-compute a ref for each possible question?!

[sinnbeck]

I managed to find a solution (perhaps a bit hacky but it work)

I do this outside the react component. It just creates refs when needed, or reuse previous ones

const refs = {};

export function getRef(questionId) {
    if (!refs[questionId]) {
        refs[questionId] = createRef(null);
    }

    return refs[questionId];
}