How to concat in map function of reactjs

Question

In below code what happening is concat is replacing the value in array instead of pushing it in react.

export default class Newsfeed extends Component {

 constructor(props, context) {
 super(props, context);
 this.imagemodal = this.imagemodal.bind(this)
 this.state = {
   imageArray:[],
   myimage:[{id:1,media:[{url:xyz},{url:abc}},
           {id:2, media:[{url:xyz}, {url:abc}]
  }




 this.state.myimage.map((myimage) => {
    if(someId === myimage.id){

     myimage.media.map((media)=>{

        this.setState({
          imageArray:this.state.imageArray.concat([media.url]),
          showimageslider:true,
          sid:sid
        },() =>console.log(this.state.imageArray.length))
      })

    }
  })

imageArray is over writing the array instead of concatenating it

Help me in this reagards..

Vineesh · Accepted Answer · 2018-05-08 09:53:40Z

1

setState function is asynchronous. You can try something like below

let mediaURLs = [];
this.state.myimage.map((myimage) => {
    if(someId === myimage.id){
      myimage.media.map((media)=>{
          mediaURLs.push(media.url);      
      })
    }
})
mediaURLs = mediaURLs.concat(this.state.imageArray);
this.setState({
  imageArray:mediaURLs,
  showimageslider:true,
  sid:sid
},() =>console.log(this.state.imageArray.length))

answered May 8, 2018 at 9:53

Vineesh

3,78222 silver badges39 bronze badges

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

1 Comment

0xC0DEGURU Over a year ago

Why don't you use 'forEach' instead of 'map'. It might work a little faster.

P S Nirmal · Accepted Answer · 2018-05-08 10:05:32Z

0

Since the seState function is asynchronous you need to do the normal operation -> form the array and then do setState

const imageArray = [];
this.state.myimage.map((myimage) => {
if(someId === myimage.id){

 myimage.media.map((media)=>{
    imageArray.push(media.url);  
  }
});
this.setState({
      imageArray:this.state.imageArray.concat(imageArray),
      showimageslider:true,
      sid:sid
    },() =>console.log(this.state.imageArray.length))
  })

answered May 8, 2018 at 10:05

P S Nirmal

611 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to concat in map function of reactjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related