Update UI within .map() when condition changes?

I have a array posts, and a separate array favourites. I want the UI to display “Favourited: [Yes or No]” depending on if favourites includes the value from posts.

The problem is when I add to favourites the UI never updates.

I made a minimal example here: https://codesandbox.io/s/usestate-useeffect-playground-forked-n645c?file=/src/index.js I’m new to react and I feel like this should be simple – I did tons of research but I can’t get it.

import React, { useState } from "react";
import ReactDOM from "react-dom";
function App() {
  return <TestPage />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


export default function TestPage() {
  const posts = ["1", "2", "3", "4", "5", "6"];
  const [favourites, setFavourites] = useState(["1"]);

  return (
    <>
      {posts.map((post) => (
        <div
          style={{
            "background-color": "lightblue",
            width: "300px",
            height: "60px",
            margin: "5px",
            "font-size": "20px"
          }}
          onClick={() => {
            favourites.push(post);
            setFavourites(favourites);
            alert("Added " + post + " to favourites");
          }}
        >
          {post}
          <br />
          Favourited: {favourites.includes(post) ? <>Yes</> : <>No</>}
        </div>
      ))}
    </>
  );
}

Answer

favourites.push(post);
setFavourites(favourites);

React states need to be immutable. .push will modify the existing array, and then when you set state react does a === comparison between the old and new states, sees that they’re the same array, and so it skips rendering. Instead, you need to create a new array:

setFavourites([...favourites, post]);

It’s also a good idea to use the function version of setFavorites when your new state is based on the old. This makes sure you have the latest value of the state and so eliminates the possibility a category of bugs.

setFavourites(prev => {
  return [...prev, post];
});