Up next in 10
Adding a Modal for Editing Notes _ Complete React Course in Hindi #66
40 views
Feb 11, 2024
In the 66th episode of the "Complete React Course in Hindi," the tutorial focuses on enhancing the iNotebook project by introducing a modal for editing notes. This video provides a step-by-step guide on implementing a modal component that allows users to edit existing notes seamlessly. The instructor demonstrates how to handle user interactions, manage state changes within the modal, and update notes dynamically. Whether you're a React developer looking to improve user interaction or a learner interested in building interactive components, this tutorial offers practical insights into adding a modal for editing notes to the iNotebook application.
View Video Transcript
0:00
तो पिछले वीडियो में हम लोगों ने देखा कि किस तरह से हम लोग यहाँ पर delete कर सकते हैं note क��
0:05
लेकिन जैसे ही मैंने यहाँ पर reload किया वो note वापस आ गया इसका मतलब यह note जो है वो delete नहीं हो रह��
0:10
यानि कि मेरी जो delete request है वो नहीं जा रही है server प��
0:14
तो मुझे देखना पड़ेगा यह चीज क्यों हो रही है तो इस चीज को देखने के लिए मैं क्या करूँग��
0:18
यहाँ पर जहाँ पर मैं API call दे रहा हूँ अपने delete note की तो मैं देखता हूँ मैं कहाँ पर API call दे रहा हू��
0:24
delete note की यह रही वो API call जहाँ पर मैं note को delete कर रहा हू��
0:28
तो मैं यहाँ पर क्या करूँगा कि सबसे बहले तो अपने front end से मैं delete करूँगा ठीक ह��
0:34
in fact मैं API call मार नहीं रहा हूँ तो मुझे API call मार नहीं बढ़ेगी सबसे पहली बात तो यह है ठीक है तो मैं यह चीज कॉपी करूंगा और यहाँ पर पेस्ट करूंगा और यहाँ पर आप देखो कि अपडेट नोट की जगह डिलीट नोट करूंगा और जो हमारा मेथड होगा वो डिलीट होगा और देखने के लिए कि क्या करना है मुझे मैं ��
1:07
एडर तो यह मैंने दे दिया बॉडी में मैं कुछ भी नहीं दूंगा और यहाँ पर जैसे निगल टो रिस्पॉंस टो जैस��
1:14
आ जाएगा और मैं कंसोल डॉट लॉक कर देता हूं इस चैसेज को और यहां पर मेरा नोट डिलीट हो जाना चाहिए ठीक ह��
1:20
तो देखते हैं नोट डिलीट हो रहा है की नहीं हो रहा है यहाँ पर यह क्या कह रहा है कह रहा है की भाई अवेट कैसे यूज कर लिय��
1:24
जब यह फंक्शन को एसिंग कीजिएगा तब ना अभी यूज कर पाएगा अब यहां पर मैं इसको रिलोड करूंगा और आप लोग देखो कि जैसे ही मैं डिलीट करूंगा और रिलोड करूंगा तो यह डिलीट नहीं हुआ ठीक है इसका मतलब पता है क्या हुआ इसका मतल��
1:54
यहाँ पर देखो 404 आ गया delete note slash ये करने से ok delete note की spelling की कलत लिख दी मैंन��
2:00
delete note note नहीं note ठीक है अभी reload करता हूँ देखता हूँ क्या scene ह��
2:08
please don't wake up early को delete किया reload किया and yes
2:12
please don't wake up early delete हो गया कि यहाँ से भी delete हो गया refresh करके देखते है��
2:15
हाँ, delete हो गया, बहुत बढ़िया, ठीक है, एक और काम जो मैं यहाँ पर करना चाहूँगा, वो यह है कि, जो मेरा add note है, उसके अंदर यह check me out मैं हटाऊँगा, यह नहीं चाहिए मुझे, यह क्या कर रहा है यह चेक मी आउट, यह नहीं चाहिए मुझे, लेकिन मुझे जो च��
2:45
तब कुछ ठीक हो गया ठीक है तो यहां पर देखो मैंने बढ़िया तरीके से इस चीज को बना दिया है और अब मै��
2:51
मान लो आईएड करना चाहता हूं लेट्स लर्न जैंगो और मैं मान लो टैग को डेव देना चाहता हूं आप नोट करूंग��
2:58
यहाँ पर देखो लेट्स लर्न जैंग यह आ गया यहाँ पर रिलोड करूंगा तो यहाँ पर मौजूद है और उसी के साथ सा��
3:05
यहाँ पर रिफ्रेश करूंगा देखो लेट्स लर्न जैंग यहाँ पर पर आ चुका है टैग मेरा डेव आ चुका है ठीक है इसको मै��
3:10
दिलीट कर दूंगा अगर तो यह डिलीट हो जाएगा रिप्रेश करूंगा तो यहां से देखो डिलीट हो गया ठीक ह��
3:15
अब हमारा जो अगला स्टेप है वह होने वाला है हमारा एडिट फंक्शनालिटी मैं चाहूंगा कि यहां पर कोई भी क्लिक करे��
3:20
एक modal खुले और उस modal के अंदर क्या हो ये सारी सारी title description tag इस note से related सारी details हो और अगर मैं update करना चाहूँ किसी भी note को तो मैं update कर पाऊँ ठीक है तो यहाँ पर मैं एक चीज और करूँगा बहुत सारी दिक्कते मुझे देखने को मिल रही है आपर सबसे पहले तो मैं इसको use effect के ��
4:31
जाएगा मुझे ठीक है तो मैं इस कोड को कॉपी करूंगा और यहां पर लेकर आऊंगा ठीक है कहां पर लाऊंगा यहां प��
4:38
लेखाऊंगा ठीक है और यह मोडल है इसको यहां से अटाओ इसको यहां से अटाओ राइट लिक करके फॉरमाइट डॉक्यूमें��
4:44
ताकि सब कुछ अच्छी तरह से format हो जाए, और मैं आपको लिखूँगा edit note, ठीक है
4:51
save गिया, और बाकी सब कुछ तो ठीक है, मैं आपको बताएं क्या करूँगा
4:58
मैं इस modal को खोलने के लिए, यानि कि open करने के लिए
5:03
launch करने के लिए, जावास्क्रिप्ट का प्रियोग करूंगा और अगर आप लोग को नहीं बालूंगी कैसे करते हैं जावास्क्रिप्ट का प्रियोग एक मोडाल को три तो आपको इस तरह से कर सकते हो ठीक है कि डाल विद अ सिंगल लाइन ऑफ जावास्क्रिप्ट नहीं मुझ��
5:18
एक्शनली करना क्या है कि जो मेरा मोडाल है उसको मुझे ओपन करना है ठीक है वायर जावास्क्रिप्ट ऑप्शंस ऑप्शंस क्या है बैकड्रॉप कीबोर्ड फोकस तो मुझे यहाँ पर टॉगल करना है ठीक है तो मैं क्या करूँग physique
5:32
लुट लुट कर लूंगा तो हम लोग यहां पर करेंगे क्या कि यूज रैफ उस्तेमाल करेंगे यूज रैफ उस्तेमाल करेंगे यूज रै��
5:41
उसे बेसिकली क्या होता है कि आप किसी भी एक एलिमेंट को रेफरेंस दे सकते हो ठीक है तो मैं यहां पर क्या कर सकत��
5:47
कुछ ऐसे कर सकता हूँ, ref is equal to ref, और मेरा ref क्या होगा
5:53
मैं यहाँ पर use ref, कुछ इस तरह से use करता हूँ, use ref, ठीक है
5:58
और ref is equal to क्या होगा, use ref, और initial value इसकी एकदम blank रहेगी
6:03
यहाँ एक काम करते हैं, नल कर देते हैं, use ref करके, और यहाँ पर मैं क्या करूँगा मैं यहाँ पर लिखूँगा ref.toggle
6:10
toggle ही function था ना if I am not wrong toggle हाँ toggle ही function थ��
6:13
यहाँ निकि अगर show हो रहा है तो hide हो जाए hide हो जाए तो show हो जाए ठीक है तो यह मैं ref.toggle यहाँ पर करूँग��
6:19
और मैं save करूँगा इसको और अगर मैं आऊं अभी यहाँ पर और मैं एक चीज और करूंगा कि जो मैं यह function पास कर रहा हूँ update note
6:28
जो कि props.update note करके उपलब्द है note और उसी के साथ साथ update note ठीक है मैं यहाँ पर इसको एक on click दूँग��
6:38
और मैं कहूँगा जैसे ही click किया जाए इस पर आप update note को call कर द��
6:44
with this note ठीक है तो यह काम करते हैं एक arrow function देते हैं क्योंकि मैं argument pass कर रहा हू��
6:48
और मैं यहाँ पर note लिख दूँगा ठीक है तो यह काम मैंने किय��
6:52
मैं अब इस पर click करूँगा तो यहाँ पर देखो error आ गया, यह क्या कह रहा है, कह रहा है कि rep.toggle is not a function, ठीक है, देखते हैं क्या दिक्कत आ रही है यहाँ पर, rep.toggle is not a function का क्या मतलब है, तो यहाँ पर क्योंकि javascript इसको manage कर रही है, मैं यहाँ पर करूँगा क्या कि जो मेरा modal था, इसको मैं यहाँ से ��
7:24
जो बटन है इसको मैं यहां पर पेस कर रहा हूं एंड डेफिनेटली मैं इस बटन को दिखाना नहीं चाहूंगा बट मैं इस प��
7:29
प्रोग्रामार्टिकली क्लिक करूंगा ठीक है तो एक्जांपल मोडल करके मैंने यह दिया हुआ है तो मैं रेफ जो है रेफ plural
7:35
बना दूंगा, मैं कहूँगा ये button जो है वो मेरा जो reference है मेरा वो इस button को hold कर रहा ह��
7:40
और मैं आपर क्या करूँगा, ref. Well, ना करने की बजाय मैं ref. click करूँग��
7:46
और ref.current. click करूँगा, ref.current मतलब कहाँ पर मेरा ये जो reference है वो point कर रहा ह��
7:52
और उसके बाद dot click ठीक है तो अगर आप लोग देखें use ref की documentation तो आपको dot current dot करने के बाद ही function को use करना पड़ता ह��
8:02
तो अगर मैं इसको reload करूँ और यहाँ पर pencil पर click करूँ देखो यह खुल गई modal मेर��
8:06
अब मैं इसको बंद कर सकता हूँ मैं यहाँ पर click करूँ तो यह modal खुल गई देख रहो आप लोग मेर��
8:10
edit note form close save changes save changes update note update note form form add note type form
9:03
और यहाँ पर यह जो मैंने बटन लिखा हुआ है, add note, इसको मैं यहाँ से हटा दूँगा
9:07
rather मैं क्या करूँगा, कि यह जो div है मेरा, यह div है मेरा modal body का
9:13
और यह div है मेरा इस चीज़ का, ठीक है, तो मैं क्या करूँगा, कि जब कोई update note में click करेगा
9:19
तब मैं ये जो दोनों तीनों मेरी values हैं इनको मैं ले जाओंग��
9:24
और change कर दूँगा अपने note variable को also मैं API को hit करूँग��
9:28
और अपने note को update कर दूँगा ठीक है देखते हैं इतना कैसे काम कर रहा ह��
9:32
तो यहाँ पर यह कह रहा है on change is not defined तो on change भी मुझे लिखना पड़ेग��
9:36
तो मेरे add note के अंदर on change है और handle click भी मुझे लिखना पड़ेग��
9:41
चुकि मैं यहाँ पर edit करूँगा note को तो मैं क्या करूँगा एक तो on change ले आउग��
9:46
और handle click ले आउगा ठीक है अब यह कहा रहा है note is not defined
9:50
तो यह कहा है note is not defined तो मैं क्या करूँगा कि तो मैं यहाँ पर भी मेरे use state hook का इस्तेमाल करूँगा जैसे कि मैंने यहाँ पर किया था और मैं इस चीज को यहाँ पर लेकर आँगा ताकि मुझे error ना मिले वैसे ideally आप लोग शायद इसको context में डाल दें और एक दूसरा ही context बना लें इन सब चीज��
10:23
यह मुझे बता रहा है यहाँ पर use state is not defined ठीक है ठीक है use state मैंने use किया add note is not defined
10:32
यह कहे रहा है add note is not defined ठीक है तो यहाँ पर क्या है कि मैंन��
10:36
कही ना कही add note लिखा हुआ है देखता हूँ कहा लिखा है यार मैंने add note
10:39
ओके तो import add note from add note मैंने add note करके कोई function
10:44
बनाया हुआ कहीं ना कहीं यह रामिराएड नोट हैंडल क्लिक में आप नोट कर रहा हूं इसलिए इसको कह रहा है आ��
10:49
नोट इस नॉट डिफाइन अभी आप ठीक है अभी सब कुछ ठीक है यहां पर लॉन्च टेमो मोडल को मैं अभी आप लोग इसक��
10:56
पर नियुक्त करें बट मैं भी आप लोगों को बताता हूं मैं इसकी डिस्प्ले को नन कर दूंगा डिस्प्ले को नन करूंग��
11:02
कहां पर वे राइट नोट जो चैनल के अंदर जो लांच टेबल मॉडल है इसको मैं स्टाइल दूंगा यह मैं क्लास नेम लास्��
11:10
भी दे दूंगा इसको यहां पर यह क्लास कैसे लिखा हुआ है आपका क्लासनेम लिखा होना चाहिए और मैं यहां प��
11:15
दिनन दे दूंगा इसको तो यह गायब हो जाएगा यहां से और अगर मैं इस पर क्लिक करूं तो यह खुलकर आ रहा ह��
11:21
तो मैं टाइटल डिस्क्रिप्शन टाग यहां पर दे सकता हूं डिलीट कर दूंगा तो डिलीट हो जाएगा नोट्स मेरे सारे ठीक है रिलोड करूंगा देखो डिलीट हो गए मैं यहां पर एक नोट आड़ करता हूं वापस से दो तीन नोट्स और आड़ करता हूं और इन��
11:51
update note किसी भी note के साथ चलता है तो मुझे ये सारी की सारी values को populate करना पड़ेग��
11:57
तो एक तो मैंने ref.current.click is equal to ये कर दिया उसे के साथ साथ मैं क्या करूँग��
12:02
मैं यहाँ पर लिखूँगा मैं इसको current note कर देता हूँ मैं इसको current note कर देता हू��
12:10
और मैं यहाँ पर क्या करूँगा, मैं यहाँ पर लिखूँगा, note is equal to, यहाँ पर set note, set note करूँगा मैं current note, ठीक है, और मैं यहाँ पर current note कर दूँगा, और जो title, description और tag है, जो की पहले खाली थे, वो अब change हो जाएंगे, वो current note के बराबर हो जाएंगे
12:30
values values values note note values value title value value is equal to note value is equal to
13:10
डाइट करूंगा आज नोट किया मैंने यहां पर एडिट करूंगा इसको देखो स्टीफ यह सब आ गया लेकिन मैं यहां पर अभ��
13:15
टाइप नहीं कर पा रहा हूं टाइप क्यों नहीं कर पा रहा हूं कि मेरा ऑनचेंज जो है वह अच्छे से मैंने लिखा नही��
13:20
तो on change में मैं क्या करूँगा कि जो मैं लिखूँगा set note और इसके बाद dot dot dot note कर दिया मैंन��
13:28
e dot target dot name e dot target dot value तो मैं काम करता हूँ यहाँ पर जहाँ पर मैंने title लिखा है वहाँ पर e title e description e tag कर देता हूँ ठीक ह��
13:38
और जहां जहां ये सारी चीज़े लिखी हुई है वहाँ मुझे E करके इसको बोलना पड़ेग��
13:45
और मैं E करके इसलिए बोल लोग क्योंकि अलड़ी मेरे पास title, description और tag मौजूद है ठीक ह��
13:50
सेव किया मैंने, reload किया और यहाँ पर लगता है note मेरा add हुआ नहीं ह��
13:55
चलो उसको मैं देख लूँगा बट अभी के लिए मैं यहाँ पर यह देख सकता हूँ क��
13:59
अच्छा यहाँ पर अभी हमारी वाल्यू देखना बंद हो गई और उसी के साथ को कंसोल में कुछ एरर्स भी है��
14:08
जल्दी से ठीक कर लेते हैं सबसे पहला एरर तो टैब इंडेक्स का है टैब इंडेक्स के आई को कैपिटल करना पड़ेगा फि��
14:16
क्लास को क्लास इस इक्वल टू को क्लास नेम इस इक्वल टू करना पड़ेगा ठीक है यह सारे के सारे रिप्लेस कर देता हू��
14:25
नाम है एक और अभी रिलोड करूंगा तो यह जा चुके हैं ठीक है लेकिन मैं जैसे यह पर क्लिक करूंगा तो यहा��
14:34
पर मुझे इस दिए फ्रेंड यह नहीं देखने को मिल रहे हैं ठीक है यहां पर एक ऐड मुझे और मिल रहे है��
14:39
component is changing a controlled input to be uncontrolled और मालो मैं इस गलती का reason क्या ह��
14:44
ऐसा क्यों हो रहा है ऐसा इसलिए हो रहा है कि जो हमारा current node है उसके अंदर जो title है हमार��
14:49
वो title नाम से है और हम यहाँ पर इसको e title बोल रहे है तो हम लिखेंग��
14:53
e title current node dot title और e description current node dot
14:58
description ठीक है इस डिस्क्रिप्शन इस डिस्क्रिप्शन ठीक है और सेम चीज फॉर टाइप ठीक है तो करें नोट टॉप टाइप ठीक ह��
15:10
है यह हमारा इटाग होगा अच्छा ठीक है और यह भी ठीक हो जाना चाहिए सब कुछ तो यहां पर यह करें ह��
15:19
click is assigned, चलो ये सब चीज़े तो ठीक हो जाएंगी, अभी reload करता हूँ इसको
15:24
edit करता हूँ, यहाँ पर देखो ये चीज़ आ रही है, अब मैं इसको change कर रहाmm वाला, तो मुझे error नहीं मिलना चाहिए, वाला, जो पहले मिल रहा था
15:30
हाँ नहीं मिल रहा है, ठीक है, अब मैं चाहूँगा कि जैसे ही मैं update note पर click करू��
15:35
वैसे ही क्या हो कि ये वाला function run हो handle click वाला function run ह��
15:39
ठीक है तो मैं अगर यहाँ पर इसको एक on click दे दू मैं लिखूँगा on click is equal to handle click ठीक ह��
15:48
और यहाँ पर मैं लिख दूँगा console log और मैं यहाँ पर लिख दूँगा updating the note ठीक है और मैं यहाँ पर यह चीज करूँगा और उसी के साथ साथ एक note भी दिखा दूँगा कि जो नया note है हमारा वो क्या होने वाला है ठीक है तो यहाँ पर अगर मैं भी pencil पर click करूँगा और यहाँ पर मालो 66 लिख दिया मैंने update note प��
16:23
context है, इसके अंदर एक update function बनाएंगे, जो कि हमने already बना रखा है, यह जो edit
16:29
note है, वो हमने बना रखा है, but उसके बाद भी हमें क्या करना है, कि इसक��
16:33
use करना है, such that such that, यहाँ पर हमारा यह वाला function जो है, यह वाल��
16:39
function इसको use कर पाए, ठीक है, तो अभी तक अगर आपने playlist को access नहीं किया तो ज़रूर करन��
16:44
और bookmark करना इस playlist को इस playlist में अभी 65 videos ह��
16:49
ठीक है तो इसको ज़रूर access करें अभी के लिए इस वीडियो में इतना ही guys
16:53
Thank you so much guys for watching this video and I will see you next time
17:11
कर द��