Using setState to dynamically populate an array of objects

Question

I have an array of Objects in my props from my API but I need to modify the elements in this array of Objects and then pass it to a player on my application. I can successfully get my array of object but when I try to modify the elements and set the data into a state, The new state ends up having just the last item of my list. Here is my code,

        if(musicitem.musics){
            if(musicitem.musics.length === 0){
                this.setState({musicLimited:true })
            }
            else{
                return musicitem.musics.map((item, index)=>{
                    this.setState({
                        musics:[
                            ...musics,
                            {
                                url:apiConstants.API_MUSIC_FILES+item.url,
                                cover:apiConstants.API_MUSIC_FILES+item.cover,
                                artist:item.artist,

                            }
                        ]
                    })
                });
            }
        }

I expect my state of musics to have an array of newly constructed objects but that is not the case. It ends up with just the last object that is expected to be in my array of objects. This means that, it has actually loop through the array of objects from props but the next State keeps overriding the previous state.

Meet Zaveri · Accepted Answer · 2019-01-27 04:12:50Z

2

You should mention previous state's property(i.e. music) to get setState know that while using spread operator.

You can access previous state as passing first params to this.setState().

Example : this.setState(prevState => ({ music : [...prevState.music, {artist:item.artist}] }))

Your code should be updated like this :

 if(musicitem.musics){
        if(musicitem.musics.length === 0){
            this.setState({musicLimited:true })
        }
        else{
            return musicitem.musics.map((item, index)=>{
                this.setState(prevState => ({
                    musics:[
                        ...prevState.musics, // use prevState
                        {
                            url:apiConstants.API_MUSIC_FILES+item.url,
                            cover:apiConstants.API_MUSIC_FILES+item.cover,
                            artist:item.artist,

                        }
                    ]
                }))
            });
        }
    }

answered Jan 27, 2019 at 4:12

Meet Zaveri

3,0671 gold badge27 silver badges36 bronze badges

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

2 Comments

user4686130 Over a year ago

Thanks so much. It works like magic. 1) i thought the ...musics, will do that besides that, I tried passing the currentState and prevState and I didnt get it working. definitely because I did not add the .musics to it

Meet Zaveri Over a year ago

Glad to provide assist ! Yes inside setState's prop key-value pair, you have to explicitly define previous state's property using it's object

Collectives™ on Stack Overflow

Using setState to dynamically populate an array of objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related