weird-array.js

import React, { Component } from 'react';
import Image from './../dom-elements/Image';
import ProjectDetailCaption from './../ProjectDetailCaption';
import PortfolioPopover from './PortfolioPopover';
import { getKey, photoArray } from './../../scripts';
import { spacing, widths } from './../../styles/theme.json';
import './flex-layout.scss';

export default class FlexiblePortfolioLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgArray: null
    };
    this.imgObject = [];
    this.id = 0;
    this.clickPopup = this._clickPopup.bind(this);
  }

  _getImgArray(imgObj) {
    // Update image array add each render.
    this.imgObject.push(imgObj);
  }

  _indexCount() {
    this.id = this.id + 1;
    return this.id;
  }

  _clickPopup(id) {
    const imgOffset = this.state.imgArray.length / 2;
    const offsetId = (id - 1) - imgOffset;
    const img = this.state.imgArray[offsetId];
    alert('image - ' + offsetId + ' - CLICKED! - ' + img.image.urls.large + ' - ' + img.image.metadata.caption );
    console.log(img.image.urls.large);
  }

  componentDidMount() {
    // THE GENERATED Image ARRAY from calling _getImgArray(imgObj) on each GridItem render.
    console.log('BUILT IMAGE OBJECT :: ', this.imgObject);
    this.setState({
      imgArray: this.imgObject
    });
    setTimeout(() => {
      // WHY AM I GETTING A DOUBLE ARRAY
      console.log('IMAGE ARRAY - Why Double??? :: ', this.state.imgArray);
    }, 1);
  }

  render () {
    const GridItem = (props) => {
      let indexNo = this._indexCount();
      this._getImgArray(props.ImgData);
      return (
        <div className={ indexNo +  ' flexible-image-wrapper'} onClick={() => this._clickPopup(indexNo)}>
          <ProjectDetailCaption
            ProjectName={props.ImgData.image.metadata.title}
            ImageDescription={props.ImgData.image.metadata.caption}/>
          <div className="image-inner">
            <Image source={props.ImgData.image.urls.large}/>
          </div>
        </div>
      );
    };
    const FlexLayout = this.props.LayoutItems.map((item, i) =>
      <li className={getKey(item) + ' flex-row row'} key={'layout-item-' + i}>
        {
          (item.two_column)
          ? <div className={getKey(item) + '-wrapper'}>
              <GridItem ImgData={item.two_column.left_image}/>
              <GridItem ImgData={item.two_column.right_image}/>
            </div> :
          (item.left_column)
          ? <div className={getKey(item) + '-wrapper'}>
              <GridItem ImgData={item.left_column}/>
            </div> :
          (item.right_column)
          ? <div className={getKey(item) + '-wrapper'}>
              <GridItem ImgData={item.right_column}/>
            </div> :
          (item.full_bleed)
          ? <div className={getKey(item) + '-wrapper'}>
              <GridItem ImgData={item.full_bleed}/>
            </div> :
          (item.centered)
          ? <div className={getKey(item) + '-wrapper'}>
              <GridItem ImgData={item.centered}/>
            </div> :
          (item.full_row)
          ? <div className={getKey(item) + '-wrapper'}>
              <GridItem ImgData={item.full_row}/>
            </div>
          : null
        }
      </li>
    );
    return (
      <section id="flexible-layout">
        <PortfolioPopover PortfolioImages={this.state.imgArray}/>
        <ul id="layout">
          {FlexLayout}
        </ul>
      </section>
    );
  };
};