fbr.teachable.com "Delete A Document From The Firestore"

App.js

import React, { Component } from "react";
import "./App.css";

import { db } from "./firebase";

window.db = db;

class App extends Component {
  state = {
    title: "Loading...",
    suggestions: []
  };
  componentDidMount() {
    db
      .doc("courses/online")
      .get()
      .then(doc => this.setState({ title: doc.data().name }));

    db.collection("suggestions").onSnapshot(collection => {
      const suggestions = collection.docs.map(doc => ({
        ...doc.data(),
        id: doc.id
      }));
      this.setState({ suggestions });
    });
  }
  handleSubmit(e) {
    e.preventDefault();
    db.collection("suggestions").add({ name: this.titleName.value });
    this.titleName.value = "";
  }
  render() {
    const { title, suggestions } = this.state;
    return (
      <div>
        <h1>{title}</h1>

        <form onSubmit={this.handleSubmit.bind(this)}>
          <input type="text" ref={input => (this.titleName = input)} />
          <button type="submit">Submit</button>
        </form>

        <ul>
          {suggestions &&
            suggestions.map(({ name, id }) => (
              <li key={id}>
                {name}
                <button
                  onClick={() =>
                    db
                      .collection("suggestions")
                      .doc(id)
                      .delete()}
                >
                  Delete Me
                </button>
              </li>
            ))}
        </ul>
      </div>
    );
  }
}

export default App;