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>
        )       
    }
});

What are you trying to achieve? Also, your current map function just returns each item in the array unmodified; it is equivalent to just assigning the array to a new variable (i.e. var images = this.props.images) — gfullam
– gfullam, Commented Sep 29, 2016 at 13:23
@AlexanderT. i updated the question, I am just looking for the first image in the images array — user6002037
– user6002037, Commented Sep 29, 2016 at 13:23

Oleksandr T. · Accepted Answer · 2016-09-29 13:27:22Z

3

Just get first element from property images,

var List = React.createClass({
  render: function() {
    var images = this.props.images.map(function(item) {
      return item.images[0]; 
                        ^^^
    });

    return <div>{ images }</div>       
  }
});

Example

answered Sep 29, 2016 at 13:27

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2016-09-29 13:26:23Z

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>

eslotwinski · Accepted Answer · 2016-09-29 13:31:15Z

0

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
        })

answered Sep 29, 2016 at 13:31

eslotwinski

1211 silver badge6 bronze badges

Collectives™ on Stack Overflow

react - MAP through an array contained in another array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related