How delete/edit Firestore document from collection with react

Question

So I have a simple CRUD App with React using Firebase Firestore, and I have a bunch of collection. Inside each collection I have images object with images. I can’t find a way to delete or edit these images. For the moment I’m able to fetch and displays images by there collection.

There is my code. I want to add delete and an edit button inside the .

Please help...

import React, { useState, useEffect } from "react";
import { useRouteMatch, Link } from "react-router-dom";
import { NewPhoto } from "./NewPhoto";
import { app } from "./base";

const db = app.firestore();

export const Album = () => {
  const [images, setImages] = useState([]);
  const [albumName, setAlbumName] = useState("");

  const match = useRouteMatch("/:album");
  const { album } = match.params;

  useEffect(() => {
    const unmount = db.collection("albums")
      .doc(album)
      .onSnapshot((doc) => {
        setImages(doc.data().images || []);
        setAlbumName(doc.data().name);
      });
      return unmount
  }, []);

  return (
    <>
      <section>
        <header>
          <h1>{albumName}</h1>
          <p>Go to the <Link to="/">Home page</Link></p>
        </header>
        {images.map((image) => (
          <aside key={image.name}>
            <img src={image.url} alt="album" />
          </aside>
        ))}
      </section>
      <footer>
        <NewPhoto currentAlbum={album} />
      </footer>
    </>
  );
};

Answer 1

I'm unsure what you are trying to achieve or what your document looks like, is your url image as a string in the doc or is it stored in the firebase storage.

Deleting docs is relatively simple as long as you have the doc reference, see these guides on how to delete documents or if you want to delete a field within a doc see these guides. If you want to remove your image from storage look at this doc.

Alternatively if you just want to update that string your can use these docs to guide you

To add that functionality to your code under a button you could do something like what is detailed in this post

Maybe something like this would work for you;

import React, { useState, useEffect, useCallback } from "react";
import { useRouteMatch, Link } from "react-router-dom";
import { NewPhoto } from "./NewPhoto";
import { app } from "./base";

const db = app.firestore();

export const Album = () => {
  const [images, setImages] = useState([]);
  const [albumName, setAlbumName] = useState("");
  const [isSending, setSending] = useState(false);

  const match = useRouteMatch("/:album");
  const { album } = match.params;

  const deleteDoc =  useCallback((indexToRemove) => {
    setSending(true);
    db.collection("albums")
      .doc(album)
      .update('images', Firestore.FieldValue.arrayRemove(indexToRemove))
   .then (()=>{
      setSending(false);
      console.log("Album deleted");   
    });
   .catch (error => {
      setSending(false);
      console.log(error);
    });

  },[])

  useEffect(() => {
    const unmount = db.collection("albums")
      .doc(album)
      .onSnapshot((doc) => {
        setImages(doc.data().images || []);
        setAlbumName(doc.data().name);
      });
      return unmount
  }, []);

  return (
    <>
      <section>
        <header>
          <h1>{albumName}</h1>
          <p>Go to the <Link to="/">Home page</Link></p>
        </header>
        {images.map((image, index) => (
          <aside key={image.name}>
            <img src={image.url} alt="album" />
          </aside>
        ))}
      <input type="button" disabled={isSending} onClick={deleteDoc(index)} />
      </section>
      <footer>
        <NewPhoto currentAlbum={album} />
      </footer>
    </>
  );
};