React ajax data integration

By : Animal
Source: Stackoverflow.com
Question!

I have built an app with such ReactDOM.render

ReactDOM.render(
<Carousel>
    <img src="http://placehold.it/300x100" short="test test test test test test test test test test test test" long="1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, quam modi dolore, reiciendis fugit illo vel? Dolorum qui ad pariatur non eaque consequatur illum inventore, unde repudiandae, possimus eum vitae."/>
    <img src="http://placehold.it/300x100" short="test test test test test test test test test test test test" long="1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, quam modi dolore, reiciendis fugit illo vel? Dolorum qui ad pariatur non eaque consequatur illum inventore, unde repudiandae, possimus eum vitae."/>
</Carousel>,
document.getElementById('contentModule')
);

Now I have to integrate this with json so that img is a single element.

[
   {
      "src":"\/media\/images\/test\/corporate_portfolio.jpg",
      "short":"test test test test test test test test test test test test",
      "long":"0Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, quam modi dolore, reiciendis fugit illo vel? Dolorum qui ad pariatur non eaque consequatur illum inventore, unde repudiandae, possimus eum vitae.",
   },
   {
      "src":"\/media\/images\/test\/corporate_portfolio.jpg",
      "short":"test test test test test test test test test test test test",
      "long":"1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, quam modi dolore, reiciendis fugit illo vel? Dolorum qui ad pariatur non eaque consequatur illum inventore, unde repudiandae, possimus eum vitae.",
   },
]

Is there a way to build a Carousel with it's children using json? Or do I have to change my code to incorporate it some other way?

I tried loading data and assigning it to state but I can't figure if I can use this object in my private render function.

var Carousel = React.createClass({
  componentDidMount: function() {
    this._loadData();
  },
  render: function(){
    let style = this._handleHeight();
    return (
      <div 
      className='carousel' style={style}>
        <div className="figure-wrapper">
          {this._renderFigureNodes()}
        </div>
      </div>
    )
  },
  _loadData: function() {
    $.ajax({
      url: '/misc/bundles.php',
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('#GET Error', status, err.toString());
      }.bind(this)
    });
  },
  _renderFigureNodes() {

     let figureNodes = React.Children.map(this.props.children, (child, index) => {
     let style = this._handleFigureStyle(index, this.state.current);
     let className = this._handleFigureClass(index, this.state.current);
     let current = this.state.current;
     return (

       <figure
       className={className}
       style={style}
       key={index}
       onClick={this._handleFigureClick.bind(this, index, current)}
       onMouseEnter={this._handleFigureHover.bind(this, index, true)}
       onMouseLeave={this._handleFigureHover.bind(this, index, false)}
       >

         {child}
         <div className='short'>

           {child.props.short}

         </div>

       </figure>

     );
   });
   return figureNodes;
 }
});

I need to somehow integrate {child} and {child.short} with json.

I tried mapping my data object in _renderFigureNodes but it appears to be undefined when the function is called.

this.state.data.map(function (data) {
  console.log(data.short)
})
By : Animal


Answers
It turned out to be pretty simple.

I had to define empty array in getInitialState so that it is always defined.

getInitialState: function(){

  let wProcent;

  return {
    current: 0,
    move: 0,
    page: 0,
    clicked: false,
    helper: wProcent,
    data: []
  }
}

_loadData() is ok.

Then save 'this' in a variable because it was no longer pointing to react class.

_renderFigureNodes() {

  var that = this;

  let figureNodes = this.state.data.map(function(child, index) {

    let style = that._handleFigureStyle(index, that.state.current);
    let className = that._handleFigureClass(index, that.state.current);
    let current = that.state.current;
    return (

      <figure
      className={className}
      style={style}
      key={index}
      onClick={that._handleFigureClick.bind(that, index, current)}
      onMouseEnter={that._handleFigureHover.bind(that, index, true)}
      onMouseLeave={that._handleFigureHover.bind(that, index, false)}
      >
        <img src={child.src} />

        <div className='short'>

          {child.short}

        </div>

      </figure>

    )

  })

  return figureNodes;
}
By : Animal


This video can help you solving your question :)
By: admin