stories/CSSTransitionGroupFixture.js

import React from 'react';

import TransitionGroup from '../src/TransitionGroup';
import StoryFixture from './StoryFixture';

class CSSTransitionGroupFixture extends React.Component {
  static defaultProps = {
    items: [],
  };

  count = this.props.items.length;
  state = {
    items: this.props.items,
  };

  handleAddItem = () => {
    this.setState(({ items }) => ({
      items: [...items, `Item number: ${++this.count}`],
    }));
  };

  handleRemoveItems = () => {
    this.setState(({ items }) => {
      items = items.slice();
      items.splice(1, 3);
      return { items };
    });
  };

  handleRemoveItem = (item) => {
    this.setState(({ items }) => ({
      items: items.filter((i) => i !== item),
    }));
  };

  render() {
    const { items: _, description, children, ...rest } = this.props;
    // e.g. `Fade`, see where `CSSTransitionGroupFixture` is used
    const { type: TransitionType, props: transitionTypeProps } =
      React.Children.only(children);

    return (
      <StoryFixture description={description}>
        <div style={{ marginBottom: 10 }}>
          <button onClick={this.handleAddItem}>Add Item</button>{' '}
          <button onClick={this.handleRemoveItems}>Remove a few</button>
        </div>
        <TransitionGroup component="div" {...rest}>
          {this.state.items.map((item) => (
            <TransitionType {...transitionTypeProps} key={item}>
              {item}
              <button onClick={() => this.handleRemoveItem(item)}>
                &times;
              </button>
            </TransitionType>
          ))}
        </TransitionGroup>
      </StoryFixture>
    );
  }
}

export default CSSTransitionGroupFixture;