Skip to content

Instantly share code, notes, and snippets.

@christiangenco christiangenco/App.js
Last active Jan 16, 2018

Embed
What would you like to do?
fbr.teachable.com "Read Multiple Documents From The Firestore"
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.