Cake php | pushing data JSON into the component | reactDOMServer

[tauseefk]

We've been trying to use this with Cake php. So far I've had no luck in pushing the json data into the component and then render it. The code looks somewhat like this:

<?php
App::uses('AppController', 'Controller');
include '../../vendor/reactphp/ReactJS.php';
class ReactController extends AppController {
 public function index() {
        $testJSON=[
          [
              'imageUrl' => 'https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12132892_1390180737947878_1933929151_n.jpg',
              'caption' => '#hiking #waterfall #stream #beautiful #nature #fun #photooftheday #sightseeing #travel #newhampshire #whitemountains #wonderful'
          ],
          [
              'imageUrl' => 'https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12135352_909678639126847_907565337_n.jpg',
              'caption' => 'An osage orange tunnel made as boundaries when fences couldnt be made to keep people off local farms. #osage #tunnel #nature #hiking #tree #ohio #sugarcreek #sugarcreekmetropark #natgeo #natgeotravel #explore'
          ]
        ];
        $rjs = new ReactJS(
        file_get_contents('https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js'), // location of React's code
    file_get_contents(FULL_BASE_URL.'/js/instagramFeed-raw.js'));

        $rjs->setComponent('PictureCard', json_encode($data));
        $this->set('markup',$rjs->getMarkup());
    }
}

?>

index.ctp looks like this

<h1>Test</h1>
<div id="here"><?php echo $markup;?></div>

The js file looks like

"use strict";

var PictureCard = React.createClass({
  displayName: "PictureCard",

  loadPicturesFromServer: function loadPicturesFromServer() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: (function (data) {
        // console.log(data);
        this.setState({ data: data });
        // console.log(this.state);
      }).bind(this),
      error: (function (xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }).bind(this)
    });
  },
  getInitialState: function getInitialState() {
    return { data: [] };
  },
  componentDidMount: function componentDidMount() {
    this.loadPicturesFromServer();
    // setInterval(this.loadPicturesFromServer, this.pollInterval);
  },
  render: function render() {
    var image = this.state.data.map(function (image, index) {
      return(
        // `key` is a React-specific concept and is not mandatory for the
        // purpose of this tutorial. if you're curious, see more here:
        // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
        React.createElement(
          "div",
          { key: index },
          React.createElement(
            "a",
            { href: image.imageUrl },
            React.createElement("img", { key: image.imageUrl, src: image.imageUrl })
          ),
          React.createElement(
            "h1",
            { key: image.caption },
            " ",
            image.caption,
            " "
          )
        )
      );
    });
    return React.createElement(
      "div",
      { className: "pictureCard" },
      image
    );
  }
});

I want to use ReactDOMServer.renderToString with this, but there's no way that I can currently do that. cc @stoyan

[Finetuned]

+1

[adrianricardo]

+1

[zpao]

The encoded JSON in the above example is an array. setComponent will pass that directly to React.createElement as the props, which are expected to be an object, not an array. It looks like your component expects a data prop, so your JSON should have that as a key.

[zpao]

Actually your component isn't expecting a data prop but a url prop, which will then be used to do xhr and get data. Your component doesn't have a way to accept data via props. So you have more work to do to make this play nicely (you could take a data prop which then gets stored into state).