delinear delinear - 3 years ago 186
React JSX Question

Correct way to use CSSTransitionGroup and Redux Connect

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 Source

Are you using version 2+ of react-transition-group? There is no CSSTransitionGroup after version 2. Try reverting by doing npm install --save react-transition-group@1.2.0 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download