React Issue

gistfile1.md

/*
  Home.js
*/
import React from 'react';

import Master from './layouts/Master';

import HeroSlide from './partials/hero/Slide.js';
import LatestOffenders from './partials/LatestOffenders';
import GameGallery from './partials/GameGallery';
import LatestDiscussions from './partials/LatestDiscussions';
import FavouritePrisons from './partials/FavouritePrisons';
import CommunityCTA from './partials/CommunityCTA';


var Home = React.createClass({
    getInitialState: function() {
    return {
      slides: []
    };
  },

  componentDidMount: function() {
    $.get(wp.api + '/pages/8', function(result) {
      if (this.isMounted()) {
        this.setState({
          slides: result.acf.slides
        });
      }
    }.bind(this));
  },

  render : function() {
    return (
      <div>
        <section className="page-top">
          {this.state.slides.map(function(slide, index) {
            return <HeroSlide key={index} data={slide} />;
          })}
        </section>
        <main className="main" role="main">
          <LatestOffenders />
          <GameGallery />
          <LatestDiscussions />
          <FavouritePrisons />
          <CommunityCTA />
        </main>
      </div>
    )
  }
});


export default Home;

/*
  Hero Slide
*/

import React from 'react';

var HeroSlide = React.createClass({
  render : function() {
    return (
        <div className="hero hero--home">
            <div className="hero-content">
                <img className=" hero-badge" src={this.props.top} alt="" />
                <h1 className="hero-title">{this.props.headline}</h1>
                <a href="#" className="btn hero-btn"></a>
                <p>{this.props.subtext}</p>
            </div>
            <div className="hero-content--left">
                <img src={this.props.left} alt="" />
            </div>
            <div className="hero-content--right">
                <img src={this.props.right} alt="" />
            </div>
        </div>
    )
  }
});

export default HeroSlide;

 result.acf.slides

    "slides": [
      {
        "left": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-left.png",
        "right": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-right.png",
        "top": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-stamp.png",
        "headline": "Reprehenderit qui in ea voluptate?",
        "subtext": "Available on x, x and x",
        "button": [
          {
            "text": "Watch the trailer <span class=\"hero-play\"></span>",
            "link": "https://www.youtube.com/"
          }
        ]
      },
      {
        "left": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-left.png",
        "right": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-right-2.png",
        "top": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-stamp.png",
        "headline": "Sed Perspiciatis Unde Omnis Iste Natus",
        "subtext": "Reprehenderit qui in ea voluptate velit esse quam",
        "button": [
          {
            "text": "Eius modi tempora",
            "link": "/guides-tips"
          }
        ]
      },
      {
        "left": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-left.png",
        "right": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-right-3.png",
        "top": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-stamp.png",
        "headline": "Accusamus Iusto Odio Dignissimos Ducimus",
        "subtext": "",
        "button": [
          {
            "text": "Reiciendis voluptatibus maiores",
            "link": "/terms"
          }
        ]
      },
      {
        "left": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-left.png",
        "right": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-right-4.png",
        "top": "https://s3-eu-west-1.amazonaws.com/pa/content/uploads/2015/12/hero-stamp.png",
        "headline": "Cum Soluta Nobis Est Eligendi Optio",
        "subtext": "",
        "button": [
          {
            "text": "Saepe eveniet",
            "link": "https://bbc.com"
          }
        ]
      }
    ]