What would be the best way to change the state of multiple nested arrays of objects in React? Let's see the example below: I have a component that will display the top playlist for each genre. I have a property genre which is an array of objects and each object has a property songs which is also an array of objects. If I want to change the song named Soldier of Fortune to Child in Time (Let's suppose in Change function as parameters I have indexes of Song and Genre already provided from the UI change). How can I access multiple levels of nested objects and not mutate the state?
this.state = {
title: 'Top playlists',
genres: [
{
genreName: 'pop',
followers: 2456,
songs: [
{
title: 'Soldier of fortune',
author: 'Deep Purple',
},
],
},
],
};
handleChangeSongName = (e, genreIndex, songIndex) => {
// genreIndex = 0;
// songIndex = 0;
// e.target.name = title;
// e.target.value = "Child in time"
...What to do here?
}
you can modify your handleChangeSongName function to this:
handleChangeSongName = (e, genreIndex, songIndex) => {
// genreIndex = 0;
// songIndex = 0;
// e.target.name = title;
// e.target.value = "Child in time"
this.setState((prevState) => {
let temp = {
...prevState,
genres: [...prevState.genres]
}
// change title "Soldier of fortune" to "Child in time"
temp.genres[genreIndex].songs[songIndex][e.target.name] = e.target.value
return temp
})
}
I would change your state like this:
this.state = {
title: "Top playlists",
genres: [
{
followers: 2456,
genreName: "pop",
songs: [
{
title: "Soldier of fortune",
author: "Deep Purple"
}
]
}
]
};
and then
handleChangeSongName = (e, genreIndex, songIndex) => {
// genreIndex = 0;
// songIndex = 0;
// e.target.name = title;
// e.target.value = "Child in time"
...What to do here?
const genres = _.cloneDeep(this.state.genres); // create deep copy with underscore
// or like this
// const genres = JSON.parse(JSON.stringify(this.state.genres))
if(genres.length && genres[genreIndex] && genres[genreIndex].songs.length && genres[genreIndex].songs[songIndex]) {
genres[genreIndex].songs[songIndex][e.target.name] = e.target.value;
this.setState({
genres: genres
});
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.