react - MAP through an array contained in another array

Question

I am looping through an array in react using .map. However, this array contains another array, which I am unsure of how to loop through.

The code I currently have looks like the below. The result I am looking for is that I get the first image from each of the images array.

//RETURNED FROM AJAX CALL 
[
   {
      id:"1",
      images:['image1', 'image2', 'image3']
   },
   {
      id:"2",
      images:['image4', 'image5', 'image6']
   }
];

REACT CODE

var App = React.createClass({
   getInitialState: function() {
      return {data: []}
   },

   componentDidMount: function(){
      this.getData();
   },

   getData: function() {
      $.ajax({
          url:'.....',
          method: 'GET',
          success: function(response){
              this.setState({data: response});
          }.bind(this)
      })
    },

   render: function(){
      return(<List images={this.state.data} />)
   }
});

var List = React.createClass({

    render: function() {
        var images = this.props.images.map(function(image){
            //want to return the first image from each images array..
        })
        return(
            <div>
                <p>{images}</p>
            </div>
        )       
    }
});

Answer 1

You should do it this way

var images = this.props.images.map(function(image, index){
        var img = image.images;
        return (
          <div>
        {img.map(function(value, index) {
          return <div key={index}>{value}</div>
        })}

        </div>
        )
    })

Assign you image to a variable and then use that variable to loop over the inner object.

var App = React.createClass({
   getInitialState: function() {
      return {data: []}
   },

   componentDidMount: function(){
      this.getData();
   },

   getData: function() {
     var data = [
   {
      id:"1",
      images:['image1', 'image2', 'image3']
   },
   {
      id:"2",
      images:['image4', 'image5', 'image6']
   }
];
     this.setState({data: data});
    },

   render: function(){
      return(<List images={this.state.data} />)
   }
});

var List = React.createClass({

    render: function() {
        var images = this.props.images.map(function(image, index){
            var img = image.images;
            return (
              <div>
            {img.map(function(value, index) {
              return <div key={index}>{value}</div>
            })}
            
            </div>
            )
        })
        return(
            <div>
                <p>{images}</p>
            </div>
        )       
    }
});
     
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

Here is a working fiddle, I believe this is the output you wished to get.

https://jsfiddle.net/m8q63gkk/

// This is the most important line
var images = this.props.images.map(function(image {
            return(image.images[0]); // updated here
        })