如何使用es6语法导入ReactCSSTransitionGroup？

Question

I'm trying to create Modal window to my React app, and I'm following this tutorial.

However, I got the following error

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Modal`.

here is my code

import React from 'react'
import {ReactCSSTransitionGroup} from 'react-addons-css-transition-group'

const Modal = React.createClass ({

    render() {

        if (this.props.isOpen) {
            return (
                <ReactCSSTransitionGroup transitionName={this.props.transitionName}>
                    <div className="modal">
                        {this.props.children}
                    </div>
                </ReactCSSTransitionGroup>
            )    
        }

        else {
            return (
                <ReactCSSTransitionGroup transitionName={this.props.transitionName} />
            )
        }
    }
})

module.exports = Modal

I installed react-addons-css-transition-group by npm install --save react-addons-css-transition-group

The problem is clearly ReactCSSTransitionGroup not being imported right, as replacing it with plain div doesn't throw any errors.

Answer 1

You have to remove the braces from {ReactCSSTransitionGroup}

import {ReactCSSTransitionGroup} from 'react-addons-css-transition-group'

should be

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

Also, you should provide a key for the children inside ReactCSSTransitionGroup

<ReactCSSTransitionGroup transitionName={this.props.transitionName}>
                    <div className="modal" key="transitionGroup">
                        {this.props.children}
                    </div>
</ReactCSSTransitionGroup>