Sample JavaScript code of React Transition Group's TransitionGroup component

react-transition-group-transitionGroup.js

const ChoresToDo = () => {
  const [chores, setChores] = useState([
    { id: 1, text: 'Dust' },
    { id: 2, text: 'Polish floors' },
    { id: 3, text: 'Wipe down countertops' }
  ]);

  return (
    <Container>
      <ListGroup>
        <TransitionGroup className="todo-list">
          {chores.map(({ id, description }) => (
            <CSSTransition
              key={id}
              timeout={500}
              classNames="chore"
            >
              <ListGroup.Item>
                <Button
                  className="remove-btn"
                  variant="danger"
                  size="sm"
                  onClick={() =>
                    setChores(chores =>
                      chores.filter(chore => chore.id !== id)
                    )
                  }
                >
                  &times;
                </Button>
                {description}
              </ListGroup.Item>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </ListGroup>
    </Container>
  );
}