How to correctly change state of a multiple nested array of objects in React?

Question

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

This may be vague, but how about instead of using map ( I assumed u used map :D ) use a for loop or a while in which you can store the index of you'r array's as a component propriety ? — Ionut Eugen
– Ionut Eugen, Commented May 29, 2019 at 23:43
I am just curious about updating the state, not displaying the data. Let's suppose I have displayed everything and I have an input field where you have the list of the data and I got the correct index of song and index of the genre. I just need to figure out how to properly change the state — Amel Amcë Muminovic
– Amel Amcë Muminovic, Commented May 29, 2019 at 23:50

Mervzs · Accepted Answer · 2019-05-30 00:10:13Z

4

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

}

answered May 30, 2019 at 0:10

Mervzs

1,1548 silver badges21 bronze badges

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

7 Comments

Amel Amcë Muminovic Over a year ago

This kinda works, but I am losing Focus after I type a single letter in the input field. So, I need to click again and type one more letter, and so on

Mervzs Over a year ago

It is a good practice to update those changes on button press. not when changing value on textInput. do a separate handling of your textInput.

Mervzs Over a year ago

Also can I know what component did you use for the input and how you implemented it?

Amel Amcë Muminovic Over a year ago

I used Input from the 'reactstrap' module. I am mapping the array of the elements and then onChange, I am sending an event, what genre is and what song I am changing. Something like this. <Input value={songs[songIndex].title} onChange={(e) => {handleChange(e, genreIndex, songIndex, )}} />

Mervzs Over a year ago

Mine is working on simple TextInput component of react-native.I think you implement it right , but i dont know the cause of sudden unfocus while you triggering a key. But in my answer on your main question. that is one of the best way to change to state of a nested objects.

|

Mitro · Accepted Answer · 2019-05-30 00:08:23Z

0

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

  }

edited May 30, 2019 at 0:08

answered May 29, 2019 at 23:55

Mitro

2782 silver badges8 bronze badges

2 Comments

Amel Amcë Muminovic Over a year ago

I think this will mutate the state cause I am directly working on its values?

Mitro Over a year ago

Yes, you are right. You should create a deep copy of genres, and than manipulating before set a new state. I updated the answer.

Collectives™ on Stack Overflow

How to correctly change state of a multiple nested array of objects in React?

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related