Cacher is the code snippet organizer for pro developers

export default class CardsTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {data: []};
  }

  createDuplicates = (arr) => {
    let doubleArr = arr.slice(0);
    for (let obj of arr) {
      let clone = JSON.parse(JSON.stringify(obj));
      clone.id = `${obj.id}@2`;
      doubleArr.push(clone);
    }
    return doubleArr;
  }

  loadGhipy = (data) => {
    this.setState({data: []});
    let baseUrl = 'http://api.giphy.com/v1/gifs/search?q',
      keyword = data.keyword || 'cards',
      limit = data.number || 1,
      apikey = 'dc6zaTOxFJmzC';
    loadAjax(`${baseUrl}=${keyword}&api_key=${apikey}&limit=${limit}`,
      (xhr) => {
        let cardsData = JSON.parse(xhr.responseText),
          doubleData = this.createDuplicates(cardsData.data);
        this.setState({data: doubleData});
      }
    );
  }

  handleUpdate = (i) => {
    let items = this.state.data;
    items[1].turn = item[1] + 1;
    this.setState({data: items});
  }

  handleFormSubmit = (formData) => {
    this.loadGhipy(formData);
  }

  componentDidMount = () => {
    let dummyData = [];
    this.loadGhipy(dummyData);
  }
  render = () => {
    return (
      <div className="cards-table">
        <h2 className="cards-table__title">{this.props.title}</h2>
        <CardsForm onFormSubmit={this.handleFormSubmit} />
        <CardsList data={this.state.data} handleUpdate={this.handleUpdate}/>
      </div>
    );
  }
}

export default class CardsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      turns: 0,
      change: false
    };
  }
  handleCardClick = (i) => {
    let itemClick = this.props.data[i].slug;
    this.setState({turns: this.state.turns + 1});
  }
  componentDidUpdate  = () => {
    console.log('componentDidUpdate');
    if (this.state.turns >= 2) {
      this.setState({change: true});
    }
  }

  render() {
    return (
      <div className="cards-list">
        {this.props.data.map((card, i) => {
          return (
            <Card onClick={() => this.handleCardClick(i)}
            title={card.slug}
            key={card.id}
            bgImage={card.images.original.url}
            handleUpdate={this.props.handleUpdate}
            />
          );
        })}
      </div>
    );
  }
}

export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false
    };
  }
  handleclick  = (ev) => {
    this.setState({active: !this.state.active});
    this.props.onClick();
  }

  render() {
    let imgUrl = this.props.bgImage,
      CardBackStyle = {
        backgroundImage: 'url(' + imgUrl + ')',
        backgroundSize: 'cover'
      },
      activeClass = this.state.active ? 'clicked' : 'not-clicked',
      classes = `card ${activeClass}`;
    return (
      <div className={classes} onClick={this.handleclick} >
        <div className="card__container">
          <div className="card__front"></div>
          <div className="card__back" style={CardBackStyle}>
            <h4 className="card__title"> {this.props.title} </h4>
          </div>
        </div>
      </div>
    );
  }
}