How to update item in array state in react native?

Question

Can someone tell me how I can fix the "updated" issue. I can't update the items dynamically, I can only update manually.

Here is mode code

// Function (async) for rename the playlist and update
    const renamePlaylist = async (el) => {
        try {
            const result = await AsyncStorage.getItem(STORAGE_KEY);
            if (result !== null || result !== '') {
                /* let filterArrayRenamePlaylist = playList.filter((val) => {
                    if (val.id !== el ) {
                        return val;
                    }
                }); */

                console.log(el, ' --------- el');

                let renamePlayList = playList.filter((val) => {
                    if ( val.title === el ) {
                        let objIndex = playList.findIndex(obj => obj.title == val.title);
                        playList[objIndex].title = el; // it is not updated !
                        console.log(el , ' ----------- el 2');
                    };
                });
                
                // const updateList = [...renamePlayList ];
                setUpdate(context, {addToPlayList: null, playList: [...renamePlayList] });
                return await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(renamePlayList));

            }
            setRenamePlaylistModalVisible(false);
        } catch (error) {
            console.log(error)
        }
    }

When I try to manually update the playlist title like this:

let renamePlayList = playList.filter((val) => {
                        if ( val.title === el ) {
                            let objIndex = playList.findIndex(obj => obj.title == val.title);
                            playList[objIndex].title = 'This works'; // This works
                            // playList[objIndex].title = el; // This does not works
                            console.log(el , ' ----------- el 2');
                        };
                    });

I searched but couldn't find a solution to my problem.

Answer 1

lets take a closer look to your code and what your code is doing line by line, you made a few logical and code-style mistakes there:

let renamePlayList = playList.filter((val) => {
    if ( val.title === el ) {
    let objIndex = playList.findIndex(obj => obj.title == val.title);
        playList[objIndex].title = el; // it is not updated !
        console.log(el , ' ----------- el 2');
    };
});

Issue 1: Do not write misleading functions, filter function should not modify anything, nobody will expect it to do that, side-effects are bad.Please, consider to separate Filtering and Modifying logic

Issue 2: Filter function should return a value, true or false. In your case it returns nothing, void, so in the snippet above your renamePlayList will be an empty array, [].

Issue 3: The logical issue itself.

1. You do not need to seek objIndex, because you have the val element from same array AND array filter function itself do provide index of currently processing element, take a look at the docs please: https://www.w3schools.com/jsref/jsref_filter.asp (Syntax section)

2. playList[objIndex] is absolutely equal to your val object on first matching val, if you have more elements with same title - your findIndex code will return the first found element only, all the rest elements will be unchanged

3. Your val.title === el statement and playList[objIndex].title = el; makes no sense due to title is el in any case, like title was el and you are reasigning it to el, if it was "abc" reasigning it to "abc" will not change anything. Your playList[objIndex].title = 'This works'; // This works works exactly because you are setting a different value.

Based on that i would recommend changing your filter function to

playList
   .filter((val) => val.title === el)
   .forEach((val) => val.title = "new title or whatever you need here, not el btw")

This code will modify elements in playList, not sure if it is expected but if not - just make a deep clone of it before processing. your setUpdate will need a little change also after that:

setUpdate(context, {addToPlayList: null, playList: [...playlist] });

Please, double check what your code is doing and what are you trying to achieve. My guess is that your top level function needs 2 parameters, like oldTitle and newTitle so it would be

playList
   .filter((val) => val.title === oldTitle)
   .forEach((val) => val.title = newTitle)