var defaultSlideData = [{"id":1,"group-tag":"Group1-0","units":"packets","name":"ping-request-rx-count","value-type":"INT","http-endpoint-ref":"api/v1/pong/stats","widget-type":"COUNTER","description":"no of ping requests","value-integer":2538459,"json-query-method":"NAMEKEY","vnfr-id":"39b56173-be82-4f87-872a-eaa761b36281","mp-id":"1-39b56173-be82-4f87-872a-eaa761b36281","vnfr-name":"pong_vnfd"},{"id":2,"group-tag":"Group1-0","units":"packets","name":"ping-response-tx-count","value-type":"INT","http-endpoint-ref":"api/v1/pong/stats","widget-type":"COUNTER","description":"no of ping responses","value-integer":2538459,"json-query-method":"NAMEKEY","vnfr-id":"39b56173-be82-4f87-872a-eaa761b36281","mp-id":"2-39b56173-be82-4f87-872a-eaa761b36281","vnfr-name":"pong_vnfd"},{"id":1,"group-tag":"Group1-1","units":"packets","name":"ping-request-tx-count","value-type":"INT","http-endpoint-ref":"api/v1/ping/stats","widget-type":"COUNTER","description":"no of ping requests","value-integer":2538460,"json-query-method":"NAMEKEY","vnfr-id":"9f0c4f07-f5e2-4189-aa25-acee550eb02b","mp-id":"1-9f0c4f07-f5e2-4189-aa25-acee550eb02b","vnfr-name":"ping_vnfd"},{"id":2,"group-tag":"Group1-1","units":"packets","name":"ping-response-rx-count","value-type":"INT","http-endpoint-ref":"api/v1/ping/stats","widget-type":"COUNTER","description":"no of ping responses","value-integer":2538455,"json-query-method":"NAMEKEY","vnfr-id":"9f0c4f07-f5e2-4189-aa25-acee550eb02b","mp-id":"2-9f0c4f07-f5e2-4189-aa25-acee550eb02b","vnfr-name":"ping_vnfd"}]; import React from 'react'; import ReactDOM from 'react-dom'; require('./skyquakeCarousel.scss'); export default class SkyquakeCarousel extends React.Component { constructor(props) { super(props); this.state = {}; this.state.slides = this.constructSlides(props.slides); //current slide number. can eventually be used with initial construct slides function to specify initial slide. construct slides currently defaults to slide 1 as initial. this.state.currentSlide = props.currentSlide; //Ref handles. Index coresponds to slide position. Last slide is overflowed left in dom with an order of 1; this.state.refsArray = this.state.slides.map(function(v, i) { return v.ref }); } componentWillReceiveProps(props) { console.log(props); let slides = this.constructSlides(props.slides); console.log('refs', this.refs); this.setState({ slides: slides }); } constructSlides(data){ let slides = []; let len = data.length; let classItems = 'slide'; return data.map(function(v, i) { let slideOrder = i + 2; let isRef = ''; let ref; if (slideOrder > len) { isRef = ' is-ref'; slideOrder = 1; } ref = 'slide-' + (i+1); // return (