How to store form data in Cloud Firestore with React | Part 7 ReactJS Tutorial Series with Full App

Published: 06 April 2021
on channel: Carmelle Codes
11,713
282

In this React Firebase Firestore tutorial, we are going to go over submitting form data, specifically text inputs, to your Cloud Firestore database. Hooks won't be necessary here since we are just submitting data with the saveAnswer() handler. This handler pulls everything from the form and puts it into an object that we pass to Firebase Cloud Firestore. The method for saving our data is the Firestore "add" method, so that we don't have to make a unique id ourselves. If you would like to set the id for the new document yourself, for example, if you were trying to keep track of the user's id that submitted the data, look into Firestore's "set" method.

If you would rather control your form with useState hooks, see my example here in a previous tutorial video:    • React JS Tutorial - 03 FIREBASE AUTH ...  

Level: Beginner/Intermediate

0:00 Intro
0:14 Demo
1:03 Start coding
1:17 Initialize Firestore DB
2:17 Implement two basic pages, Survey and Answers
4:23 saveAnswer() handler function when user submits form
5:02 Add pages to Navigation Bar
6:41 Finish basic Answers page
7:49 Finish the rest of saveAnswer()
10:20 Add Firestore to our Firebase config

GitHub Repo Link: https://github.com/carmellemillar/car...

A good introduction to Cloud Firestore's implementation:    • What is a NoSQL Database? How is Clou...  

Uncontrolled Form Components tweet by Josh W. Comeau: https://twitter.com/joshwcomeau/statu...


Watch video How to store form data in Cloud Firestore with React | Part 7 ReactJS Tutorial Series with Full App online without registration, duration hours minute second in high quality. This video was added by user Carmelle Codes 06 April 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 11,713 once and liked it 282 people.