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.
