Correct way to use CSSTransitionGroup and Redux Connect

Question

I'm trying to add some animation styling to a component and struggling to figure out where this is going wrong. Here is a simple component with connect() and CSSTransitionGroup (a different component elsewhere in the DOM will eventually be used to trigger opening my lightbox component, Redux will be used to share state between them, in case you were wondering why it's a requirement):

LightboxPresentation.js:

import React, { Component } from 'react';
import { CSSTransitionGroup } from 'react-transition-group';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';

class LightboxPresentation extends Component {
    render() {
        return (
            <div>
            <CSSTransitionGroup
                transitionName="lightbox"
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}>
                {this.renderPage()}
                </CSSTransitionGroup>
                </div>
        )
    }
    renderPage() {
        return (
            <div key={'lightbox-module'}>Some test HTML</div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        showLightbox: state.showLightbox,
        itemsShowLightbox: state.itemsShowLightbox,
    };
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(actionCreators, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(LightboxPresentation);

Here's the code that calls the above component:

App.js:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';

import ItemList from './components/ItemList';
import LightboxPresentation from './components/LightboxPresentation';

const initialState = { itemFilter: 'featured' }

const store = configureStore(initialState);

render(
    <Provider store={store}>
        <LightboxPresentation />
    </Provider>,
    document.getElementById('lightbox')
);

However I get the following error in my console:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `LightboxPresentation`.
    in LightboxPresentation
    in Connect(LightboxPresentation)
    in Provider

If I remove the block from around my renderPage call, the output of renderPage renders with no errors. It's only adding the transitions block in that causes the error. As far as I can tell import { CSSTransitionGroup } is correct, it's how they do it in the documentation (although I did try it without the curly braces and still no luck).

Am I doing something wrong? I've spent some time trying different things and Googling, but all without joy so far.

Answer 1

Are you using version 2+ of react-transition-group? There is no CSSTransitionGroup after version 2. Try reverting by doing npm install --save [email protected] if you want your code to work the way it is.

If you want to use the new version, try using the newer API found in These Docs.