React with Firebase CRUD Operations

[@CodAffection]

goo.gl/bPcyXW : Buy me a Coffee bit.ly/2t0op0W : React + AspNet Core CRUD bit.ly/3Me2bxo : Everyone's favourite way of creating React forms bit.ly/3UQdqPZ : Learn JavaScript in One Video bit.ly/36I1zuH : Material UI with React

[@Ganesh-ld8ph]

0:53 - React App installation 1:55 - Adding Bootstap CDN links 3:00 - Creating Firebase project for Realtime Database 5:50 - Creating components and contact forms design 17:00 - Input Onchange event operation 21:13 - onSubmit form values storing in firebase Database 26:22 - Fetching form values from Database 33:45 - Edit form values operation 40:50 - Deleting values from Database and App

[@Saradomin65]

For new people with errors in 23:35. Change the import statement from import * as firebase from "firebase/app"; to import firebase from "firebase/app"; import "firebase/database"; Since there's been a breaking change after version 8.0.0 of firebase and it's a good practice to explicitly only import what package of firebase function we'll be using (e.g database, auth, etc.) hence the second import statement.

[@mdnajamraine2229]

thanks man this really works.... Thanks a ton

[@secretcaptain7694]

Thanks bro

[@harshavardhan2775]

Thank you so much. This is what i had been searching for a long time! This video helped me understand better than the documentation I hope you make one on authentication too

[@caiovinicius7133]

Thank you very much. Thanks to this video I was able to understand the ease of firebase. All the best and a lot of success on your journey.

[@mayaparamita2254]

THANK YOU I tried it and it works. Very simple! Thanks.

[@zunairzafar6742]

Great Video and Blog! - much needed tutorial! Thanks a lot it has given a lot of useful information! - Simple to the point!

[@muhammadhamzashabbir8364]

You are the best sir. I have learned a lot of things in one video wow great you are amazing !!!!!!!!!!!!

[@CodAffection]

Glad to hear that

[@noraifuru]

Thank you very much for the effort and good job sir, you're helping me a lot. I suggest an authentication video with react and firebase as well ^^

[@mrenderbombz]

Cara, você realmente me salvou

[@mohamedkalid8713]

For new people with errors in 23:35. Change the import statement from import * as firebase from "firebase/app"; to import firebase from "firebase/compat/app"; import "firebase/compat/database";

[@vinothkumars7421]

Thanks. Started using firebase with react.. This is a good one.. Keep going

[@secretcaptain7694]

Thank you for this type of wonderful video and as well description is also great

[@trevorjarvis1361]

Best tutorial on this topic. Nicely done!

[@rupeshchandramohanty416]

Thank you for this Tutorial, it was really simple to understand and this project helped me gain some confidence!

[@NathanAguilarr]

I am having a problem displaying the application form on the React App. Instead of showing the Contact Register, display form, or list of contacts as it should, it only shows a blank white page. This issue occurred at around 10:00. Do you have any tips on how to fix this?

[@santrawebtech35]

hi sir why this errors are showing me when i export firebasedb to component ./src/firebase.js Attempted import error: 'initializeApp' is not exported from 'firebase' (imported as 'firebase').

[@khaleeljaffal4732]

thanks for this video, but i have a problem with the references with firebase any help??

[@davidpereira4026]

I really loved this tutorial ty for this.

[@CodAffection]

Glad it was helpful!

[@gauravwaghmare3883]

Import error: initialize App is not exported form firebase

[@pjguitar15]

Bro, instead of sfc snippet. You can use rafce to get the complete structure with the import

[@CodAffection]

Thanks, bro.

[@agustinlavalla8892]

Great lesson. Thanks you!

[@aayushsharma9386]

After reading data from 32:11 , not able to enter anything in fields. Anyone else facing similar issue ?

[@abdallahjabermohamad3147]

you re the best bro !!! , thank you so much

[@shivamtyagi9597]

amazing video. I used it in my project

[@codemasterinnovative]

I love you bro fetching data in firebase

[@khiemnguyen6930]

Help me a lot. Thank you

[@mootimadness7825]

I really needed this thx a lot sir

[@thiagoalves8339]

helped me a lot Congratulacios

[@jinyoucheng8114]

Thank you very much. In that case (18:48), how to validate email with regex? Not only email, but also any kind of input such as zipCode, credit card number etc?

[@diegoteran8126]

Gracias aprendí mucho justo lo que quería saber

[@sloggo]

Why do I have trouble with mapping ? ( 30:35 ), it returns nothing, I tried to console.log inside of it, but nothing appears in console.

[@sloggo]

Of course I correctly wrote all the code, double checked it, and can't solve the issue please help

[@haganlife]

@@sloggo post your code in codesandbox.io so we can see where you may have bugged your code

[@athiberal7058]

i can't find code js on 2:10

[@asifalikhan5281]

this video made my day

[@safalpatel2839]

Thanks a lot for this helpful content🔥🔥

[@queenofnoodles7504]

Well explained 😇

[@budgetgamer-tamil5415]

We must validate the details entered using JS or else empty data will be added in the firebase database if the user just clicks the submit button

[@rahulmartin10]

how do we do that? pls help

[@budgetgamer-tamil5415]

@@rahulmartin10 kzbin.info/www/bejne/f5-Tn3VmdqeUi80 try this

[@adnanmehmood7384]

25:05 when i click on save this error show (Failed to compile ./src/components/Contacts.js Module not found: Can't resolve '../firebase' in 'C:\Users\AD\Desktop\New folder\firebase_crud\src\components' This error occurred during the build time and cannot be dismissed.

[@adnanmehmood7384]

i double check code but still show error

[@arteyefectosproducciones9852]

Lograste resolver amigo?

[@meekmantaran]

Run "npm i firebase" again in the terminal after stopping the app...

[@roseisjustarose5868]

how to click using that backlit is it backlit instead of single quote?

[@musangowope5556]

Nice tutorial man!

[@edwardpangilinan7263]

Line 24:4: React Hook useEffect has a missing dependency: 'initialFieldValues'. Either include it or remove the dependency array

[@veloxSZ]

you can simply remove it, it's not necessary.

[@intlconxun]

I have this warning, also. Not sure how to remove it.

[@ed1nh0]

Guys you can remove the dependencies. Disable the ESLint warning and keep coding.

[@yashasaveekesarwani2551]

thanks a lot brother

[@ReynaldAdolphe]

Is this final project on GitHub or somewhere to download?

[@sonalgurav2212]

How we can perform insert update delete select operations in same form using reactjs and firebase

[@reaganganancial9801]

The Bug here is even if you don't fill up the form it will still save it and give you an empty data.

[@intlconxun]

I had hoped that would be addressed.

[@intlconxun]

Hello, I hope you are well. Can you help me... I have reached 25:00 and now I am getting the error message: ./src/firebase.js Attempted import error: 'initializeApp' is not exported from 'firebase' (imported as 'firebase'). Everything has been working wonderfully. I believe I have coded everything as you have shown. Can you give me any advice? Thank you

[@Kushkrakenco]

Hey Maryam i ran into the same problem fixed it by changing import * as firebase from 'firebase' var firebaseConfig = { // Your Firebase Details }; // Initialize Firebase var fireDb = firebase.initializeApp(firebaseConfig); export default fireDb.database().ref(); to import firebase from 'firebase/app' import 'firebase/database' var firebaseConfig = { // Your Firebase Details }; // Initialize Firebase var fireDb = firebase.initializeApp(firebaseConfig); export default fireDb.database().ref(); hope this helps

[@intlconxun]

@@Kushkrakenco Thank you, that did help.

[@TheElderbary]

@@Kushkrakenco I have a problem Expected an assigment or function call and instead saw an expression. Its to useEffect firebase.child('contact').on('value', (snapshot) => { if (snapshot.val() != null) setContactObjects; }) } []}. Do you have any idea?

[@Kushkrakenco]

@@TheElderbary Hey im not really sure about this I can have a look and get back to you if i find a fix i do have a repo on github if you like?

[@TheElderbary]

@@Kushkrakenco If you could share the repository I would be happy

[@MapMavericks]

Thank you

[@ed1nh0]

24:38 that arrow at line 10 is throwing me this error: ```The parser expected to find a '}' to match the '{' token here.```

[@mayaparamita2254]

is it perhaps you put other than '{' and '}'? Maybe you put '[ ]' or '( )'?

[@ed1nh0]

@@mayaparamita2254 nope, this issue is so weird...

[@jaki1325]

how to handle this error? Failed to compile ./src/components/Contacts.js Module not found: Can't resolve 'firebase' in 'E:\MAGANG\firebase-crud\src\components'

[@basilelhassan7219]

I'm still facing an issue It keep saying :" typeerror: firebase_app__webpack_imported_module_2__.default.database is not a function" Any suggestions to solve this??

[@letrangN]

This is very helpful. also how do you clear the input field after you save or update?

[@georgeyvb4460]

You can make a useState hook and upon entering the data set the useState hook to an empty string

[@argeelearner3978]

I just finished this great video!!! and I am looking forward for more of your great stuff!! You are one of my best ASP.NET Core Channels on KZbin!!

[@CodAffection]

Thanks for your wonderful feedback.

[@gerard02700]

why not using react router in your react projects ?

[@mdshoharabpk1126]

thanks

[@davidpereira4026]

How can i turn off the resize of textarea? i had tried "resize:none" already and ""resize="none"" "resize="off"

[@aman_s_96]

Are you using inline style in react? Use this style={{resize: 'none'}}

[@vetrivelk7767]

Hi, Please upload a video for consuming JWT token authentication implemented in asp.net core(API-backend)and React js (Front-end)

[@CodAffection]

sure.

[@ashishchauhan5203]

bro from where u take the reference? what is the flow of building? what is the procedure of building? how can u remember all the properties at once? I have a project to submit and I am on level zero right now even after 20 day of researching. I need help.

[@shivamjoshi9473]

Attempted import error: 'initializeApp' is not exported from 'firebase' (imported as 'firebase'). an error occours . can u please help it, how to resolve this.

[@ALEXAN03R]

if i reload the page the update option appears

[@dragosalexandra3112]

How could I import data from firebase? To complete the data on Firebase and then it appears in the table.

[@irishjoymaguddatu6028]

Sir, how can you view the contact information of each id?

[@mohammedsulthana9305]

sir, how to upload photos ? can u add a fileld of image ?

[@TheElderbary]

I have a problem Expected an assigment or function call and instead saw an expression. Its to useEffect firebase.child('contact').on('value', (snapshot) => { if (snapshot.val() != null) setContactObjects; }) } []}. Do you have any idea?

[@sushantgarudkar211]

add ({...snapshot.val()}) just after setContactObjects like setContactObjects({...snapshot.val()})

[@eurowebs]

Man, i suggest you starting testing your apps, its a must, take time but pay dividends even in salary ;) unit testing, integration , e2e, xunit , testbed, jasmine, karma etc etc lets jump right in

[@CodAffection]

Thanks for the idea!

[@mikrailhyper]

Attempted import error: 'initializeApp' is not exported from 'firebase/app' (imported as 'firebase'). how do I fix this???

[@saman5597]

Change the firebase version to 7.14.1 (major version 7) , it worked fine for me

[@mikrailhyper]

@@saman5597 thank you very much

[@pansilutharusha6793]

how to change the firebase version

[@mikrailhyper]

@@pansilutharusha6793reinstall with yarn add firebase@7.14.1 or npm install firebase@7.14.1

[@toddwhitelow4752]

Thank you so much for this video. I really enjoyed it and learned a lot. Was there a link to the source code anywhere? I feel like that was the only thing I was missing.

[@jRQLME]

THANK YOU !!!

[@kuldeepdawar7496]

Thanks for this tutorial. Can I get this code from Github?

[@danny77rojas]

Hi, what's the theme do you using in vs code?

[@CodAffection]

Night Owl

[@shaikmaqsood2185]

Not all Heroes wear cape

[@Benjy_Gizmo]

any chance we could see the full code in github?

[@bharatns598]

sfc is not showing , what to do? I need to type the full code.

[@abhayagarwal5097]

Well it won't magically unless you have some extension that can read what that means and expand that abbreviation.

[@aritrasarkar1174]

i am following your tutorial but i got an error which says firebase.database not a function. What to do ?

[@ces9036]

Same problem

[@dohaessam708]

i got that error , TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.child(...).push is not a function in line firebaseDb.child('contacts').push( 32 | obj, 33 | err => { how can i solve that ??

[@sidraibrahim2925]

same error.. have you resolved??

[@maximillianronaldomanalu5824]

@@sidraibrahim2925 i have same problem so i search another CRUD project and this is what i change ion firebase.js // Initialize Firebase firebase.initializeApp(firebaseConfig); export default firebase; and next on Contact.js change const addOrEdit = obj => { const todoRef = firebase.database().ref("contact"); const todo = { obj, }; todoRef.push(todo); } Hope this is soleved ur problem :)

[@sidraibrahim2925]

@@maximillianronaldomanalu5824 thank you so much. it is solved

[@TheElderbary]

​@@maximillianronaldomanalu5824 Do you know how to resolved problem with delete single contact?

[@tarkozturk4931]

Thanks...

[@pansilutharusha6793]

how to fix this " ./src/firebase.js Attempted import error: 'initializeApp' is not exported from 'firebase' (imported as 'firebase')."

[@pansilutharusha6793]

I fixed it change the firebase.js import * as firebase from 'firebase'; change like this import firebase from "firebase";

[@jayakumar2927]

Can you share Angular+ Firebase

[@CodAffection]

we've already done that with old versions of angular - kzbin.info/www/bejne/b6jbdqp7bbp5qJI

[@mizartjason7789]

Hello @CodAffection Do you have idea how will I show ID number per increment? I have ID shown in my table but it is in random numbers

[@mizartjason7789]

Also, everytime I type, component is rendering. How will I remove this?

[@haganlife]

@@mizartjason7789 Add timer to function, wait for one second before render...

[@BrunoEduardoDeMouraFerreira]

do you have source of this application? Because when I try to record on the Firestore, he says that I am denied access, but I put full access to the Firestore.

[@abbassyed4730]

Getting an error after completing the form. TypeError: e.target is not iterable in the handleInputChange method. What could be wrong?

[@munisowjanya]

Sir i am facing an error that is 'Too many re-renders. React limits the number of renders to prevent an infinite loop' Tell me how to resolve this error?

[@abhayagarwal5097]

Error or warning ?

[@AjayKumar-yv1rb]

hello Please make a video angular 9 show category and sub-category select option very Argent...

[@deborahaanyuoduman7548]

why do i get this error when i implement the update operation? index.js:1 Warning: A component is changing a controlled input of type undefined to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: fb.me/react-controlled-components

[@huebys]

did you ever figure this out? I am having the same issue

[@deborahaanyuoduman7548]

@@huebys I haven't figured it out yet. All the solutions I looked up were too complex for me to understand. Let me know if you find something

[@huebys]

@@deborahaanyuoduman7548 will do!

[@iUmerFarooq]

Come with more React js Projects.

[@nileshchaudhari843]

Nice and clean tutorial. Can you please make video tutorial for redux that will be great help Be safe :)

[@CodAffection]

it's basics covered here, check it out - kzbin.info/www/bejne/m3XSno2ur85kb7s

[@nileshchaudhari843]

@@CodAffection Thanks for your hard work

[@iUmerFarooq]

When you're come with MERN Stack?

[@muhammadidrees6650]

kzbin.info/www/bejne/hJ-3aIBulMymf7s

[@manish6022able]

and my comment "here" 😁😁

[@Benjy_Gizmo]

anyone getting the to many re-renders error?

[@rahulmartin10]

Not working now.. Please update .. records not creating in firebase database

[@rahulmartin10]

Its working now.. thanks :)

[@bharatns598]

npx is not recognised as internal or external

[@Mashwishi]

At the video 37:15 Line 14: if(props.currentId == '') Error: Expected '===' and instead saw '=='.eslinte(qeqeq) Line 20: },[props.currentId, props.contactObjects]) Error: React Hook useEffect has a missing dependency: 'initialFieldValues'. Either include it or remove the dependency array. (eslintreact-hooks/exhaustive-deps)

[@Mashwishi]

i did follow 100% of this edit wont work.

[@Mashwishi]

wont show to inputs when clicked.

[@Mashwishi]

TypeError: Cannot read property 'undefined' of undefined 10 | useEffect(()=>{ 11 | if(props.currentId=='') > 12 | setValues({ 13 | ...initialFieldValues 14 | })

[@hacikho]

Hi CodAffection, I tried your previous videos, liked your teaching method, teaching through the projects, however, I was not pleased with your explanation of state and react hooks in this video, it was confusing for me, and I hardly completed the tutorial. This does not mean that you did not do a great job, it was just confusing. Thanks for providing project-based tutorials.

[@CodAffection]

Noted. We can discuss that in future video.

[@jaggyjut]

Sorry CodAffection, I agree with Haci as i found this tutorial difficult to understand. Also why was firebasedb.collection not used instead of firebasedb.child as in this forum sebhastian.com/react-firestore Thank you for creating the awesome learning content.

[@haganlife]

@@jaggyjut Realtime Database Vs Cloud Firestore methods

[@bilalullahkhan5517]

Do you have any degree sir? Or does it matter to get a degree in software development job.

[@christiancespedesmedina9929]

TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_3__.default.child is not a function .... same error in a lot of videos. Not help for me.

[@sidraibrahim2925]

same error. have u resolved?

[@christiancespedesmedina9929]

@@sidraibrahim2925 No :(

[@maximillianronaldomanalu5824]

@@christiancespedesmedina9929 ​ @Sidra Ibrahim ii have sam problem so i search another CRUD project and this is what i change ion firebase.js // Initialize Firebase firebase.initializeApp(firebaseConfig); export default firebase; and next on Contact.js change const addOrEdit = obj => { const todoRef = firebase.database().ref("contact"); const todo = { obj, }; todoRef.push(todo); } Hope this is soleved ur problem :)

[@ces9036]

@@maximillianronaldomanalu5824 it says that the firebase is not defined. What to do?

[@navdeeprathore9106]

Source code?

[@Mashwishi]

TypeError: Cannot read property 'undefined' of undefined 10 | useEffect(()=>{ 11 | if(props.currentId=='') > 12 | setValues({ 13 | ...initialFieldValues 14 | })

[@Benjy_Gizmo]

I will buy you a coffe' if you upload it

[@r0nni34]

Oh wait i forgot to import react.... Dammmmm I thought.... This was a feature or something 😂😂😂😂😂

[@prashantjha654]

i was here for curd tut not bootstrap..

[@pauljohny200]

Thanks for this good video ..The video is also clear. etc Was able to add a record ,Fetch a record but me facing issue on editing. mentioned firebaseDb.child(`contacts/${currentId}`).set( I receive following error Error: Reference.child failed: First argument was an invalid path = "contacts/${currentId}". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]" When i use edit . and when i change the code to . I have remove dollaar symbol. firebaseDb.child('contacts/{currentId}').set( obj,err => {if (err) console.log(err) else setCurrentId( It works but i receive 2 records one the edited record and the older record is not deleted . Any information highly appreciated. Below is my github link for the code Thanks again for your time. github.com/magazinecrm/reactcurd Thanks

[@pauljohny200]

Thanks I could do the add earlier but edit i was getting a bit conufsed on ..Thanks this is the best one .. Right now Thanks and take care.Had to apply .. contacts/${currentId}` back ` Thanks