CSSTransition react: Only backdrop shown and photo not being displayed

Question

I have a component that gets rendered when a photo is clicked with CSSTransition. It also has a Backdrop component but upon click only the backdrop gets shown.

If I remove CSSTransition then it behaves as expected.

Here's the photo viewer component:

import styles from './PhotoZoomViewer.module.scss';
import { CSSTransition } from 'react-transition-group';
import transitions from './PhotoZoomViewerTransition.module.scss';
import PhotoZoomBackdrop from './PhotoZoomBackdrop/PhotoZoomBackdrop';


const PhotoZoomViewer = ({ show, photoUrl, onExit}) =>  (
     <CSSTransition in={show} timeout={500} classNames={transitions} unmountOnExit>
         <PhotoZoomBackdrop show={show} />
        <div className={styles.photoZoomViewer}>
            <img className={styles.zoomedImage} src={photoUrl} alt={photoUrl} onClick={onExit} />
        </div>
    </CSSTransition>
);

export default PhotoZoomViewer;

Here's PhotoZoomViewer's transition specific SCSS:

.enter {
    opacity: 0;

    &Active {
        opacity: 1;
        transition: all 300ms ease-in-out;
    }

}

.exit {
    opacity: 1;

    &Active{
        opacity: 0;
        transition: all 300ms ease-in-out;
    }
}

Here's PhotoZoomViewer's own SCSS:

.photoZoomViewer {
    z-index: 300;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: zoom-out;
}

Here's PhotoZoomBackdrop component:

import React from 'react';
import styles from './PhotoZoomBackdrop.module.scss';

const PhotoZoomBackdrop = ({show}) => (
    show && <div className={styles.backdrop}></div> 
);

export default PhotoZoomBackdrop;

Here's PhotoZoomBackdrop.module.scss:

.backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

Without CssTransition component backdrop and image get displayed but with the CSSTransition backdrop covers the entire page and image doesnt show up.

Answer 1

I had to enclose JSX within CSSTransition within a div:

const PhotoZoomViewer = ({ show, photoUrl, onExit}) =>  (
     <CSSTransition in={show} timeout={500} classNames={transitions} unmountOnExit>
    <div>
         <PhotoZoomBackdrop show={show} />
        <div className={styles.photoZoomViewer}>
            <img className={styles.zoomedImage} src={photoUrl} alt={photoUrl} onClick={onExit} />
        </div>
    </div>
    </CSSTransition>
);