Error 'Element type is invalid …' when trying to use TransitionGroup, CSSTransition from react-transition-group

Question

Sorry if this sounds like a duplicated question. I'm trying to learn how to use the react-transtion-group in typescript, however got the error. Here are my code:

import React, { useState } from 'react';
import './App.css';
import {
  TransitionGroup,
  CSSTransition
} from "react-transition-group";

const App = () => {

  const [myState, updateMyState] = useState({ items: ['hello', 'world', 'click', 'me'] })

  const handleAdd = () => {
    let userInput: string | null = prompt('Please enter your name.', "")
    const newItems = myState.items.concat(userInput!)
    updateMyState({ items: newItems })
  }

  const handleRemove = (index: number) => {
    let newItems = myState.items.slice();
    newItems.splice(index, 1);
    updateMyState({ items: newItems })
  }

  const items = myState.items.map((item, i) => (
    <CSSTransition
      key={i}
      classNames="example"
      timeout={{ enter: 500, exit: 300 }}
    >
      <div onClick={() => handleRemove(i)}>
        {item}
      </div>
    </CSSTransition>
  ));

  return (
    <div className="App">
      <button onClick={handleAdd}>Add Item</button>
      <TransitionGroup>
        {items}
      </TransitionGroup>
    </div>
  );
}

export default App;

Error: 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, or you might have mixed up default and named imports.

Check the render method of TransitionGroup.

I have also followed the migration guides here: https://github.com/reactjs/react-transition-group/blob/master/Migration.md, but it doesn't work for me.

Please help,

Thanks.

Answer 1

Just resolved the issue after so much scratching my head when trying so many things, by just update the version in the package.json file into 2.7.0

"react-transition-group": "2.7.0",

I guess my mistake is just following blindly using the yarn add [email protected] on their github guideline.

Sorry for being annoying.