How can I add an object to an array inside a Firebase Field Collection?

Question

I'm trying to create a to-do style app. I'm trying to create a card that contains a name and tags field. Here's an example of my data structure. I want to create another cards array but for id: "nhl".

[![enter image description here][1]][1]

I want to create a cards array (everything inside the blue box) but for the 1 object with the id:"nhl".

Here is what my createCard function looks like:

      const createCard = async () => {
    await updateDoc(doc(db, "users", currentUser.uid), {
      labels: arrayUnion({
        activeLabel: [
          {
            name: name,
            tags: tags,
          },
        ],
      }),
    });
    getData();
    findLabel(activeLabel);
    // toast.success("Tags Created!");
    console.log("Tags Created");
  };

Here is where the function is being called:

 return (
    <div className="cards">
      <div className="cards__create">
        <input
          onChange={(e) => setName(e.target.value)}
          className="cards__input"
          placeholder="Enter title..."
        ></input>
        <textarea
          onChange={(e) => setTags(e.target.value)}
          className="cards__input cards__input--textarea"
          placeholder="Enter tags..."
        ></textarea>
        <img
          onClick={createCard}
          className="cards__add"
          src={addIcon}
          alt="plus sign icon"
        ></img>
      </div>

Answer 1

arrayUnion() cannot work in your case. As explained in the doc , "each specified element that doesn't already exist in the array will be added to the end."

So, instead of updating the second element of the labels array, arrayUnion() will create a new array element with the same id fiels id:"nhl" and the two cards.

You need to first read the Firestore document, modify the labels Array in your front-end and write it back to Firestore.