fbr.teachable.com "Read Multiple Documents 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")
      .get()
      .then(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}</li>)}
        </ul>
      </div>
    );
  }
}

export default App;