StoryBlock.jsx

import React from 'react';
import { Link } from 'react-router-dom';
import { TweenMax } from 'gsap';
import { Button, Card, CardBlock, CardHeader, Col } from 'reactstrap';

export default class StoryBlock extends React.Component {
  componentWillEnter(callback) {
    const el = this.container;
    TweenMax.fromTo(el, 0.4, { x: 500, opacity: 0 }, { x: 0, opacity: 1, onComplete: callback });
  }

  render() {
    const data = this.props.data;
    let stars;
    const starArray = [];

    if (this.props.userStars === undefined) {
      stars = 0;
    } else {
      stars = this.props.userStars.stars;
    }

    for (let i = 0; i < stars; i += 1) {
      starArray.push(<img src="/images/star.png" alt="Star" height="40px" width="40px" key={i} />);
    }

    return (
      <div ref={c => this.container = c} style={{ display: 'inline-block' }}>
        <Col md={3} style={{ display: 'inline-flex', marginTop: '20px' }} >
          <Card>
            <CardHeader>
              Header
            </CardHeader>
            <CardBlock>
              Block
            </CardBlock>
          </Card>
        </Col>
      </div>
    );
  }
}

StoryMode.jsx

import React from 'react';
import { Row, Col } from 'reactstrap';
import { TransitionGroup } from 'react-transition-group';
import StoryBlock from './StoryBlock';
import Paginator from './Paginator';

export default function StoryMode(props) {
  const { data } = props;
  const StoryBlockList = [];
  let i;
  let stars;

  if (data !== undefined) {
    const highscores = props.userHighscores;

    for (i = 0; i < data.length; i += 1) {
      stars = highscores.find(o => o.ex === i);
      StoryBlockList.push(<StoryBlock userStars={stars} data={data[i]} key={i} />);
    }
  }

  return (
    <div>
      <section style={{ marginTop: '20px' }} >
        <TransitionGroup >
          {data !== undefined && StoryBlockList}
        </TransitionGroup>
      </section>
    </div>
  );
}