Using CSSTransitionGroup on a react component is giving error

Question

The error says "Element 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 Route."

The code looks like this:

import { CSSTransitionGroup } from 'react-transition-group'
import React, { Component } from 'react';

export default class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: ['hello', 'world', 'click', 'me']};
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    const newItems = this.state.items.concat([
      prompt('Enter some text')
    ]);
    this.setState({items: newItems});
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  }

  render() {
    const items = this.state.items.map((item, i) => (
      <div key={item} onClick={() => this.handleRemove(i)}>
        {item}
      </div>
    ));

    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <CSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {items}
        </CSSTransitionGroup>
      </div>
    );
  }
}

Then, tried to use it like this:

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

And this is what the styles look like:

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Can anyone come up with a logical solution for the specified error?

Answer 1

You are using v1 syntax with the v2 version of the module.

See migration guide https://github.com/reactjs/react-transition-group/blob/master/Migration.md

Most of the time a error like this is pointing on a import issue.

In your case the <CSSTransitionGroup> has been removed and a new <CSSTransition> component has been added.

Also keep in mind that the api could have also been changed so you have to rework your example.

So at least the correct import would be:

import { TransitionGroup } from 'react-transition-group';

Answer 2

I tried using importing TransitionGroup from react-transition-group as

import {TransitionGroup} from 'react-transition-group';

or you can also import TransitionGroup as

import TransitionGroup from 'react-transition-group/TransitionGroup';

<button className="Button" onClick={this.addItemHandler}>Add Item</button>
                <p>Click Item to Remove.</p>
                <TransitionGroup 
                    component="ul"
                    className="List"
                >
                    {listItems}
                </TransitionGroup>