CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
jcodey
jcodey

Reputation: 49

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

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>

Upvotes: 0

Views: 43

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83068

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.

Upvotes: 1

Related Questions