Up next in 10
Updating an existing Note _ Complete React Course in Hindi #53
3K views
Feb 11, 2024
In the 53rd episode of the "Complete React Course in Hindi," the tutorial delves into the process of updating an existing note in the iNotebook project. This video provides a step-by-step guide on implementing the functionality to modify and save changes to a previously created note. The instructor walks viewers through the backend setup, demonstrating how to handle update requests and ensure data consistency. Whether you're a React developer seeking to enhance your understanding of CRUD operations or a learner interested in building robust editing features for a full-stack application, this tutorial offers practical insights into updating existing notes in the iNotebook project.
View Video Transcript
0:00
गेस वो पर मैंने आप लोगों पर इस कोडस में बताया है कि किस तरह से हम लोग अपने जो notes हैं उनको create करके save कर सकते है��
0:07
उसके लिए मैंने आप लोगों को अपनी जो i-notebook collection है उसके अंदर जो notes वाला folder ह��
0:12
उसके अंदर मैंने add note वाला endpoint आप लोगों को बना कर दिखाया और add note के साथ साथ आपने fetch all notes वाला endpoint भी बनाय��
0:19
वेच all notes वाला endpoint क्या था कि आर हेडर में अगर आप लोगों ने token दिया हु��
0:23
तो उस user के corresponding जितने tokens है जितने notes हैं वो सारे के सारे आजाएंग��
0:28
ठीक है और उसके साथ साथ अगर आप एक नएया note आड़ करना चाहते हैं तो आप यहां से add कर सकते हैं माललो कि मैं आपर new note लिखना चाहता हू��
0:34
मैं माललो new note नाम का एक note add कर रहा हूँ और मैं आपर लिख रहा हू��
0:39
please access the playlist ठीक है access the playlist उसके साथ साथ tag में मैं आपर देदूँग��
0:46
ठीक है और मैं आपर send करूँगा तो यहाँ पर आप लोग देखो कि यह add हो चुका ह��
0:50
मैं कैसे verify करूँगा यह add हो चुका है मैं आपर इस request को send करूँगा और at the end मुझे आपर new note मल जाएगा ठीक ह��
0:56
तो यह किस user का note है इस note की id title description और tag ठीक है तो यह अच्छे से काम कर रहा थ��
1:04
अब क्या हो सकता है कि जब मैं मुझे react application बनाओंगा तब वहाँ से मुझे update करने की ज़रूरत पड़ सकती है और delete करने की ज़रूरत भी पड़ सकती ह��
1:11
तो सबसे पहले हम लोग क्या करेंगे एक end point बनाएंगे जो कि आमको मदद करेगा update करने के लिए किसी भी एक note को ठीक है तो यह अमारा route no. 3 होग��
1:19
और अब आप किसी note को update करने वाले हैं तो आपको logging तो required होगा होगा तो मैं यहाँ पर route no. 3 लिखोंगा और यहाँ पर लिखोंगा update an existing note ठीक है और जब आप किसी भी note को update करेंगे तो आप पॉंसे note को update कर रहे हैं उसकी id आप लोगों को देना पड़ेगी ठीक है और य��
1:49
कर सकते हो ठीक है आप चाहो तो बिल्कुल post request यूज़ कर सकते हो बट the thing is की हम लोग करते है��
1:55
updation के लिए put request का इस्तिमाल तो मैं सबसे पहले यहाँ पर update note कर देता हूँ और इसके साथ सा��
2:01
note की id लेना चाहूँगा और विश्वाल मैं चाहूँगा की सिर्फ वही लोग note को update कर पाएं जो लोगड इन है और अपने ही notes को update कर पाए��
2:11
तो इस चीज़ से बचने के लिए क्या करेंगे कि हम लोग यहाँ पर एक validation लगाएंग��
2:29
हम कहेंगे कि अगर आप note को update कर रहे हो तो आप update कर सकते हो लेकिन सिर्फ तब ही update कर सकते हो जब आप वही user हो जिसका यह note है ठीक है मेरी बात को समझें आप लोग की नहीं समझें तो चलो यहाँ पर हम लोग क्या करेंगे कि कोई भी validation जो है वह मैं नहीं लगाऊंगा क्��
2:59
आपकी साथ चीजें लेकर आओंगा क्या क्या चीजें लेकर आओंगा जब मैं note को आएड कर रहा थो title description और tag में दे रहा था तो title description और tag यह चीजें मैं request.body में से लेकर आओंगा ठीक है और यह तीनो de-structuring से लाने के बाद मैं क्या करूँगा एक new note object create करूँगा और मैं ��
3:29
इसको अभी के लिए खाली रखूँगा और इस पे जो जो fields मुझे मिल रही हैं वो आएड करूँगा तो मैं कहूँगा अगर title मौझूद है तो क्या करो new note, new note का जो title है new note dot title उसको बराबर कर दो किसके title के ठीक है समझे यह मैंने क्या किया मैंने basically क्या किया कि आर अगर title ��
3:59
वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर ��
4:29
करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो वो बराबर करता है तो ��
4:59
प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ाग प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ा��
5:59
प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ागा प्राज़ा��
6:29
इतनी सिक्योर होनी चीज़ी है अप्लिकेशन तो मैं सबसे बहुले क्या करूँगा कि इस्टेड़ वा सेइंग इ��
6:34
मैं find by id और update नहीं करूँगा मैं आपर find one करूँगा ठीक ह��
6:39
और मैं आपर क्या कहूँगा find one करके कि यहाँ मैं find by id करूँग��
6:45
find by id एक function होता है और यहाँ पर मैं जो है id दे दूगा ठीक है तो find
6:49
by id लेता है एक id और कौनसी id लेगा वो वो basically id मेरी लेगा request.params.id
6:57
यह कौनसी वाली id है यह वाली id है यह नहीं कि जो आप update करना चाहते हैं अब मैंने य��
7:02
note निकाल लिया जो note आप update करना चाहते हैं तीक है अब मान लो कि यह note exist नहीं करता है तीक ह��
7:08
यह भी हो सकता है यह note exist नहीं करता है इस id का जो कि most of the attackerss करने वाले हैं तो मैं यहाँ प��
7:12
सबसे पहले लिग दूँगा if not of note मैं क्या करूँगा response.status कॉंसा code मैं करूँगा send मैं करूँग��
7:21
404 टीक है और dot send और यहाँ पर not found टीक है मैं not found
7:30
send कर दूँगा टीक है और उससे के साथ मैं यह देखूंगा यह बाला जो note है क्या यह इसका जो user है वो यही ह��
7:37
request.user है तो यह चेक करने के लिए मैं क्या करूँगा मैं आपर कहूँगा कि अगर note.user.toString ठीक है note.user.toString
7:50
मुझे क्या देखा note.user.toString मुझे देखा इस note की ID अगर यह नहीं बराबर है request.user.id के अगर यह नही��
7:59
बराबर है request.user.id के इसका मतलब कुछ गडबड है गडबड क्या है कि जो बनदा लॉक्ड इन है वो किसी और का note
8:05
एकसेस करने की कोशिश कर रहा है मैं यह नहीं चाहता तो मैं यहाँ पर लिखूँगा मैंने यहाँ पर भी return लिखना थ��
8:11
तो मैं यहाँ पर लिखूँगा return और मैं यहाँ पर लिखूँगा response.status और यहाँ पर मैं unauthorized कर दूँगा उस बनदे क��
8:19
मैं कहूंगा 401 और उसी के साथ साथ मैं उसको ज़्यादा information नहीं दूँगा और मैं उसको simply यह बोलूंगा कि not
8:31
allowed तो मैं यहाँ पर उसको dot send कर दूँगा और कह दूँग��
8:36
not allowed तो मैं उसको plain text भेज देता हूँ तो यह थीज़ हो गए तीक है अगर ऐस��
8:44
भी नहीं होता है तो इसका मतलब भाई आपका जो यहाँ पर यह जो note है यह exist करता है तीक है अब यह note
8:51
हमारे पास है तीक है तो अब मैं यहाँ पर क्या कर सकता हूँ मैं यहाँ पर कुछ इस तर��
8:55
काम कर सकता हूँ मैं कह सकता हूँ note is equal to await note.find by id and update तीक है और यह क्या-क्या लेग��
9:03
सबसे पहले तो यह id लेगा तीक है तो मैं request.perms.id दे दूँगा इसको और दूसरा parameter
9:09
क्या लेगा यह कुछ इस तरह से dollar set मुझे लिखना पड़ेगा और इसके बा��
9:14
जो मेरा new note है वो मैं इसको यहाँ पर दे दूँगा तीक है और मैं यहाँ पर क्या करूँग��
9:18
new को true कर दूँगा और यह भी एक object रहेगा तीक है तो new true करने का क्या मतलब ह��
9:24
कि अगर कोई नया contact आता है तो वो create हो जाएगा बसिकली तीक है तो मैंने new को true कर दिया और यह करने से क्या होग��
9:31
कि मेरा जो note है वो update हो जाएगा ठीक है और मैं क्या करूँगा मैं यहाँ पर note भेज दूँगा ठीक है तो मैं note को भेज दूँगा जल्दी स��
9:41
हम लोग क्या करेंगे कि अपने thunder client में आएंगे और यहाँ पर एक और new request बनाएंगे और वो new request क्या होगी update note ठीक है वो update note होगी नए request और मैं क्या करूँगा कि सबसे पहले तो इसको put करूँगा ठीक है क्योंकि एक put request है उसी के साथ साथ यह update note slash id तो मुझे यहाँ पर ए��
10:11
टोकन तो यह एक बार मुझे बस मेनत करनी पड़ेगी और टोकन वग़ेर��
10:16
कॉपी करने की और उसके बाद मेरी collection के लिए सब कुछ save है मैं testing करता रहूंगा ठीक है content type application json तो मैं यहाँ प��
10:23
सिर्फ json लिग देता हूँ हो गया काम मेरा और मैं क्या करूँगा यहाँ पर कि जैसे यह body है ठीक है body में exactly same चीज आईग��
10:31
update में भी कहां गई मेरी json है हाँ json ही select कर रखी ह��
10:34
मैंने और मैं यहाँ पर updated लिखूँगा और यहाँ पर भी updated लिखूँगा ठीक है अब यहाँ पर मैं क्या करूँग��
10:41
कि जो भी ID डालूंगा वो इसमें change हो जाएगे ठीक है तो एक काम करते हैं जल्दी से हम लोग MongoDB Compass खोलते है��
10:47
ठीक है और वहां से मैं ID उठाओंगा और वो ID उठाने क��
10:52
बाद इन फाक्ट मैं एक काम और कर सकता हूँ मैं सबसे पहले इसको save कर लेता हूँ control S करके save successful है ठीक है औ��
10:58
Compass को खोलने की ज़रूरत भी नहीं है क्योंकि हमें हमारे पास end points रेड़ी हैं एकदम मैं यहाँ प��
11:02
send करूँ request को तो देखो यहाँ पर पहला वाला जो title है वो my title है और description प्लीज वेक अपल लिय��
11:08
मैं क्या करूँगा इस ID को लूँगा इस note की ID को लूँगा copy करूँगा और यहाँ पर डाल तूँगा ID की जगा पर ठीक ह��
11:15
और अब मैं क्या करूँगा new note updated मैं यहाँ पर send करूँग��
11:19
यहाँ पर 404 not found आ गया है कैसा मज़ाक है cannot put slash API slash update note मैं देखता हूँ क्या दिक्कत आ रही ह��
11:27
तो यहाँ पर slash API slash auth भी है auth भी है वो भी मुझे लिखना पड़ेग��
11:32
मैंने miss कर दिया auth ठीक है सेव कर लेता हूँ अब send करता हू��
11:36
अभी भी कह रहा है cannot found slash API slash auth slash update note
11:40
slash note की ID तो यहाँ पर हमें देखना पड़ेगा क्या दिक्कत ह��
11:44
update note slash ID क्या दिक्कत आ रही है ओके मैं समझ गया क्या दिक्कत आ रही है तो यह slash API slash notes ह��
11:52
यह वाले जो notes के end points हैं वो slash API slash auth नहीं है slash API slash notes है तो मैं यह चीज़ यहां भी update कर लेता हू��
11:58
मैं ने copy pasting करी उसकी एज़े से यह दिक्कत आ रही है तो slash API slash auth नहीं slash API slash notes वाले end points हैं यह सारे के सार��
12:06
तो यहां पर अब मैं send करूँगा और यहां पर जो यह दिक्कत आ रही है मैं देखता हूँ क्या दिक्कत आ रही है बहुत सारे errors आ रहे है��
12:12
यह कहता है cannot read property to string of undefined to string मैंने यूस्ट किया था यहां प��
12:24
कहां किया था मुझे दिख क्यों नहीं रहा है यहां पर मैंने to string किया हुआ तो यह चीज अंडिफाइन्ड ह��
12:31
इसका मतलब मैंने यहां पर await नहीं किया है अब मैं send करूँगा अभी भी यह कहा रहा है कि request लटक गई ह��
12:40
अब क्या दिक्कत आ रही है भाई यह कहा रहा है assignment to constant variable
12:44
तो मैंने assignment to constant variable कर दिया कहीं पर 61 line number में किया ह��
12:49
तो मैं note is equal to await यह नहीं कर सकता कि note constant तो मैं इसको let कर लूँगा टीक��
12:54
मैं let कर लूँगा इसको note is equal to await find note by id और इसके बाद मैं कहा दूंगा in fact मुझे इसकी ज़रूरत भी नहीं ह��
13:00
note is equal to but okay this will solve the problem टीके तो मैं इसको send करूँग��
13:04
तो यह देखो यहां पर note update हो गया टीके new note updated title new note updated मैंने किया था अब यह चेक करने के लि��
13:10
कि यह note update भी हुआ है कि नहीं मैं क्या करूँगा कि यहां पर जाओंगा fetch all notes में और send करूँग��
13:15
और यहां पर देखो new note updated हो गया अब अगर मैं new note updated 2 कर दूँगा यहां पर और इसको update करूँग��
13:21
और यहां पर वापस से fetch करूँगा देखो new note updated 2 हो गया और इस चीज़ को आप MongoDB में भी देख सकते है��
13:26
आप पर देखो new note updated 2 हो गया अब मैं अगर इसको updated 3 कर दूँगा दूँगा और send करूँगा और इसक��
13:30
refresh करूँगा तो यहां पर देखो यहां पर देखो यहां पर देखो यहां पर देखो यहां पर देख��
13:34
यहां पर देखो यहां पर देखो यहां पर देखो आप पर देखो यहां पर देखो यहां पर देखो यहां पर देख��
13:38
यहां पर देखो यहां पर देखो यहां पर देखो यहां पर देखो यहां पर देखो यहां पर देख��
13:42
यहां पर देखो यहां पर देखो यहां पर देखो आपने end points बना लिय��
13:46
get, post, put यानि कि fetch all notes बना लिया आपने add note बना लिया, आपने update note बना लिय��
13:52
अब जो अगला end point अब बनाएंगे वो है delete note और उसके बाद छुट्टी हमार��
13:56
API खतम हमारी API डन हो जुख गए तीक है तो delete note करने के लि��
14:00
पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिलीट या पूट डिली��
14:30
वो ये मिलता है कि आप सेम एंडपॉइंट पर पूट डिलीट पर कुछ और काम करवा सकते है��
14:34
गेट डिलीट पर कुछ और काम करवा सकते हैं पोस्ट डिलीट पर कुछ और काम करवा सकते है��
14:38
तो आपका एंडपॉइंट तो सेम रहेगा पस रिक्वेश का टाइप बदल के आप अलग-अलग काम करवा सकते है��
14:43
तो मैं आपका पूट डिलीट करना चाहता हूँ और यहां पर अगर आपने ये प्लेयलिस्ट अभी तक आइकसस नहीं कर रही ह��
14:46
तो यहां क्लिक करके सेप करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज़रूर करें ज��
#Computer Science
#Science