I'm learning react from some tutorial, but it's little bit old, so I'm trying to find new ways. There is code:

const data = [
    { label: 'Going to lern react', important: true, like: false, id: 1 },
    { label: 'That is good', important: false, like: false, id: 2 },
    { label: 'I need a break', important: false, like: false, id: 3 },
]

const [posts, setPosts] = useState(data)

First option is what he did on video, but with few changes from me, because he was using this.setState

const onToggleImportant = (id) => {
    setPosts(() => {
        const index = posts.findIndex(elem => elem.id === id);

        const old = posts[index];
        const newItem = { ...old, important: !old.important };

        const newArr = [...posts.slice(0, index), newItem, ...posts.slice(index   1)];

        return newArr;
    })
}

I don't like these slices tbh. And there are my two options:

const onToggleImportant = (id) => {
    setPosts(posts.map(el => el.id === id ? { ...el, important: !el.important } : el));
}

or

const onToggleImportant = (id) => {
    setPosts(() => {
        const newPosts = posts.map(el => el.id === id ? { ...el, important: !el.important } : el);
        return newPosts;
    })
}

In last one I tried to avoid mutation, but not sure if it was necessary, because there are no error in console or from eslint. So, which options is better and why? Or maybe there is another new way to do it?

CodePudding user response：

You are using functional pattern of setState which is the ideal way to go if your new state value depends on previous state. But you are not using the previous state value. It is the first parameter to the callback inside setState:

const onToggleImportant = (id) => {
    setPosts((posts) => posts.map(el => el.id === id ? { ...el, important: !el.important } : el));
}

The above code (which uses your 2nd approach) also doesn't mutate the state, because you are using spread with el. Also, map() returns a new array, so your state is updated well.