Up next in 10
Adding Previous & Next Buttons to populate NewsItems _ Complete React Course in Hindi #28
11K views
Feb 10, 2024
The video "Adding Previous & Next Buttons to populate NewsItems _ Complete React Course in Hindi #28" likely demonstrates how to enhance a React application by adding functionality to navigate through a list of NewsItems using previous and next buttons, within a course presented in Hindi. In this tutorial, viewers are guided through the process of implementing previous and next buttons to cycle through the fetched news items displayed on the user interface. The instructor likely explains how to manage the state of the application to track the current page and adjust the displayed news items accordingly when the user interacts with the buttons. Through step-by-step instructions and practical demonstrations provided in Hindi, viewers can learn how to create a more interactive and user-friendly experience by implementing navigation controls in their React applications. This video aims to empower Hindi-speaking audiences with the skills needed to build engaging and dynamic user interfaces in React.
View Video Transcript
0:00
Guys, अपने पिछले वीडियो में हम लोगों ने देखा था कि किस तरह से हम लोग सारे के सारे news articles को update कर सकते है��
0:05
component did mount का इस्टिमाल करके वहाँ पर हम लोगों ने देखा था कि हम लोग API से सारा data लेकर आ सकते है��
0:11
बट एक problem थी हमें जो articles मिल रहे थे वो 20 थ��
0:15
और अक्शॉल में जो number of articles ये API शो कर रही थी अगर मैं इसको आपको खोल के दिखाओ डिरेक्टली API क��
0:20
तो वो कर रही थी 38 तो मुझे मिल रहे है सरफ 20 articles
0:24
अक्शॉल में है 38 articles इसका मतलब जो remaining articles हैं वो page no. 2 पर ह��
0:29
तो अगर मैं यहां पर लिखो am% page is equal to 2
0:33
आप देखो पहला article कोवी शिल्ट का है यहां पर अगर मैं page is equal to 2 करूँगा त��
0:37
पहला article हो जाएगा कुछ और थीक है इसका मतलब page is equal to 2 पर भी कुछ मौझूद ह��
0:41
तो उस मौझूदा article को लेने के लिए मैं क्या करूँगा कि page is equal to 2 यहां page is equal to 3
0:47
ऐसे मैं कुछ करूँगा और मैं current state बनाओंगा और उस state में मैं क्या करूँग��
0:53
कि एक page parameter डालतूँगा और बाई डिफॉल page जोगा वो one होग��
0:57
तो अगर मैं आपर page is equal to one कर देता हूँ तब क्या होगा तो मेरा व��
1:01
कोवी शिल्ड वाला आना चीज़ी है देखो कोवी शिल्ड वाला article आ रहा है और यह जो ampersand page is equal to one ह��
1:06
यह मैं यहाँ पर embed करूँ ना करूँ बाई डिफॉल ते यह one ही ले रहा था page
1:10
अब मैं क्या जाता हूँ कि जो मेरी news component है जो container ह��
1:15
यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह ��
1:45
पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर यह पर ��
2:15
तो मैं एक काम और करूँगा यहाँ पर नावबार में डार्क मोड एनेबल करूँगा इस बार मैं कोई बड़न नहीं बना रहा हूँ डार्क मोड, लाइट मोड क��
2:20
वो आप लोग खुद कर सकते हो कॉंसेप्स रिपीट होंगे अगर मैं वैसा करूँगा त��
2:24
आपको मालूम है कि कैसे डार्क मोड और लाइट मोड करना है तो वो मैं आपके उपर छोड़ूँगा उसे के साथ साथ यह ज��
2:29
न्यूज आइटम का बढ़न है इसमें मुझे बस एक जगा खलास नीम चेंज करना पड़ेग��
2:33
जहां पर बीडियन प्राइमरी है वहाँ मैं बीडियन डार्क करूँगा सारे बढ़न से डार्क हो जाएंगे यही फायदा ह��
2:38
कॉंपोनेंट को यूज़ करने का मैंने आपलोग को पहले भी बताया था अब यहाँ पर देखो प्रीवियस और नेक्स मैंने यहाँ पर लिखा हुआ ह��
2:43
अब प्रीवियस और नेक्स जो मैंने यहाँ पर लिखा हुआ है मैं यह लेकर आना चाता हूँ बूटस्ट्राप की फ्लेक्स बॉक्स वाली गलास के अंद��
2:50
ताकि यह एक इदर हो यह इदर हो मैं बता दो मेरे कहने का क्या मतलब है बूटस्ट्राप फ्लेक्स बॉक्स यह लिखोंगा मै��
2:59
और मुझे फ्लेक्स बॉक्स की गलासेड मिल जाएंगी बूटस्ट्राप की यह तो वर्जिन 4 है मुझे वर्जिन 5 चाहिए तो यहाँ पर देख��
3:06
डिस्प्लेइ फ्लेक्स है और मुझे क्या चाहिए है यहाँ पर मैं आइटम्स को कुछ इस तरह से रखना चाहता हू��
3:10
एक बटन यहाँ हो एक बटन यहाँ हो तो यह कौन सा वाला है वर्जिन 4 वाला है वर्जिन 2, 3, 4
3:16
जस्टिफाई कंटेंट बिट्वीन वाली ग्लास में लेकर आउंगा डिस्प्लेइ फ्लेक्स लेकर आउंगा और जस्टिफाई कंटें��
3:21
बिट्वीन तो मैं आपको गड़ेनर को डिस्प्लेइ फ्लेक्स दे दूंगा और जस्टिफाई कंटेंट बिट्वीन दे दूंग��
3:31
और देखूंगा कि क्या मेरा काम हो गया हा यार मेरा काम हो गया एक प्रीवियस यहां पर आ गया नेक्स यहां पर आ गय��
3:37
यार मैं प्रीवियस नेक्स पर क्लिक कर सकता हूँ और मुझे अगली निउस देखने को मिल जाएगी ठीक है तो यह काम मैं कर सकता हू��
3:43
तो यह काम मैं कर सकता हूँ तो यह काम मैं कर सकता हूँ तो यह काम मैं कर सकता हूँ तो यह काम मैं कर सकता हूँ तो यह काम मैं कर सकता हूँ तो यह काम मैं कर सकता हूँ तो यह काम मैं कर सकता हूँ तो यह काम मैं कर सकता हूँ तो यह काम मैं कर सकता हूँ तो यह काम मैं ��
4:13
नावाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद पर नवाद ��
4:43
तो मैं सेब्प्ली एक ओन् क्लिक यहाँ पर आड कर दूँगा और हैंडल नेक्स्ट क्लिक करके एक फ़ॉंक्षन मनाओंग��
4:52
और सेम काम मैं करूँगा प्रीवियस पर अगर कोई करता है त��
4:56
ठीक है हैंडल प्रीवियस क्लिक के नाम से और यह दोनों फ़ॉंक्षन अब आप लोग इपलिमेंट करेंग��
5:01
और यहाँ पर हैंडल नेक्स्ट क्लिक भी डिफाइंड नहीं है और हैंडल प्रीवियस क्लिक भी डिफाइंड नहीं ह��
5:07
तो हम लोग क्या करेंगे एक फ़ॉंक्षन मनाओंगे ठीक है और विश्वार इसको दिस डॉट करके मुझे पुकारना पड़ेग��
5:15
क्योंकि मैं क्लास के अंदर हूँ दिस डॉट दिस डॉट और अभी के लिए प्रीव क्लिक भी ह��
5:21
नेक्स्ट क्लिक भी अगर मैंने बना दिया तो मेरे एरर्स चले जाने चाहि��
5:25
तो मैं अगर हेंडल प्रीव्यस क्लिक, हेंडल नेक्स्ट क्लिक करूँगा तो ये फ़ंक्शन्स चलने चाहि��
5:29
तो मैं अभी के लिए क्या करूँगा कनसोल डॉट लॉक करूँगा और इसके अंदर लिखूँग��
5:34
प्रीव्यस और उसी के साथ साथ मैं क्या करूँगा नेक्स्ट क्लिक दूँगा यहाँ पर ठीक ह��
5:42
सेव कर दूँगा इसको नेक्स्ट क्लिक कर सेव किया मैंने प्रीव्यस क्लिक हेंडल कर पाँग��
5:46
नेक्स्ट मैं हेंडल कर पाँगा तो अगर मैं अपने कनसोल को खोलूँग��
5:50
और मैं प्रीव्यस और नेक्स्ट पर क्लिक करूँगा यह देखो नेक्स्ट क्लिक करा रहा है यह प्रीव्यस क्लिक करा रहा ह��
5:55
तो अब मैं यहाँ पर प्रीव्यस और नेक्स्ट के अंदर कुछ काम कर सकता हूँ तो प्रीव्यस के अंदर मैं क्या करूँगा अपनी स्टेट को चेंज करूँग��
6:02
स्टेट को चेंज करके मैं क्या करूँगा जो मेरा पेज नंबर है उसको मैं चेंज कर दूँगा एक से बढ़ा दूँग��
6:08
और प्रीव्यश मैं क्या करूँगा एक से कम कर दूँगा लेकिन मैं एक चीज और करना चाहूँगा कि अगर मेरा जो पेज ह��
6:17
अगर वो एक या एक से कम है तो मैं प्रीव्यश नहीं दूँग��
6:21
क्योंकि कोई सेंस नहीं है प्रीव्यश देने का तो मैं क्या करूँगा disabled is equal to लिखूँग��
6:26
देखो disabled को अगर मैं true करूँगा तो वो बटन disabled हो जाएगा कब मैं disabled करना चाहूँगा अगर मेरा this.state.page जो ह��
6:34
वो less than equal to one होतो थीके अगर यह है तो मैं क्या करूँग��
6:38
disabled कर दूँगा तो मैं आप लोग को दिखाता हूँ कि यह disabled है बट��
6:42
मैं इस पर क्लिक नहीं कर सकता देखने आप लोग मैं इस पर क्लिक नहीं कर सकता next पर मैं कर सकता हूँ ठीक है तो यह एक तो मैंने यहाँ प��
6:48
disabled डाल दिया अब उसी के साथ साथ मैं next वाले को भ��
6:52
disabled करूँगा लेकिन next वाले को अभी disabled नहीं करूँगा next वाले को मैं disabled तब करूँगा जब मेरे पार सब कुछ य��
6:58
previous वाला सब कुछ काम करने लग जाएगा उसके बाद क्लिक हूँगा क्योंकि next को भी मैं एक limited टाइम त��
7:02
ही क्लिक कर सकता हूँ एक टाइम पर मुझे empty articles मिलने लग जाएगे ठीक है तो क्या करेंगे हम लोग य��
7:08
करने के साथ साथ अभी मैं देखो आप लोगो बताता हूँ नेक्स्ट यहाँ पर हमने सब कुछ ठीक ठीक कर दिया ह��
7:14
मैं next पर अगर क्लिक करूँगा तो मैं क्या चाहता हूँ सबसे पहले तो मैं क्या करूँगा this.set state करूँग��
7:20
state को change करूँगा एक तो page को कर दूँगा page plus one ठीक है page को update कर दूँगा और यहाँ प��
7:26
यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यह��
7:56
लिखोंगा यहाँ पर यहाँ पर ठीक है तो यह कर दिया मैंने और अब क्या करूंगा मैं कि next पर click जैसे होता है मैं सबसे पहले तो जो page है मेरा this.state.pageplus1 यह चीज़ यहाँ पर मैं यहाँ पर यूज़ करूंगा तो मैं एक काम करता हूँ इसको backticks से replace कर देता हूँ तो ��
8:26
मैंने कर दिया सब कुछ मेरा ठीक खरके आ जाएगा और इसके सा��
8:29
साथ मैं क्या करूंगा देखो मैंने दोनों स्टेट सेट कर दी एक तो मैंन��
8:33
article वाली स्टेट भी यहाँ पर सेट कर दी अब मैं इसको अड़ा दोंगा यहाँ पर तो मैं ए��
8:37
यहाँ पर डालूंगा this.setstate यह ठीक है और यही काम मैं करूंग��
8:42
previous के लिए ठीक है बस previous में एक change होगा previous मे��
8:46
change क्या होगा previous में change यह होगा कि जहाँ पर मैं यह कर रहा थ��
8:50
this.state.page प्लस वन कर रहा था वहाँ मैं minus one करूंगा ठीक ह��
8:55
और यहाँ भी मैं minus one करूंगा page को एक से कम कर दूँगा ठीक ह��
8:59
तो अब अगर मैं आप लोगो दिखाऊं यहाँ पर next पर click करके तो देखो मैंने यह किय��
9:03
अब मैं next पर ज़ासे ही click करूंगा यह देखो change होगा है सारे के सारे articles
9:07
पहला article कौन सा है भी central government वाला है ठीक है यह देखने हो आप लो��
9:11
लेकिन अगर मैं अगला next चेसे ही मारूंगा वैसे देखो यह खाली हो गय��
9:15
which was not a good experience at all ठीक है खाली नहीं होना चीए था य��
9:19
तो मुझे कैसे पता चलेगा कि अगला page मेरा खाली है यह नहीं है वो मैं calculate कर सकता हूँ infact कैसे calculate करूँगा मै��
9:25
तो कितने results मुझे अब तक मिल चुके हैं मैं page size parameter से यह चीज पता कर सकता हू��
9:30
मैं आप लोग को बताता हूँ यह चीज कैसे पता करेंगे news API के अंदर आप अगल news API टॉट वर्जी पर जाते हो और news API में जाने के बाद आप documentation में जाते ह��
9:38
और everything पर क्लिक करते हो तो इनके पास एक page size करके parameter होता है जो कि आप पास कर सकते ह��
9:43
अब अगर मैं इस page size को 2 कर दू इसलिए मैं ampercent page size is equal to 2 कर देता हू��
9:49
तो मुझे सिर्फ 2 articles देखने को मिलेंगे जैसे कि आप देख रहे हो तो मैं अगर सिर्फ 2-2 articles दिखाना चाता हूँ तो मैं page size को set कर सकता हू��
9:56
तो आगर मैं page size को 2 कर दिया है और total result 38 है तो number of pages कितने होगा आप बता��
10:08
number of pages मेरे पास हो जाएंगे 19 हर page पर 2-2 articles तो मैं number of pages calculate कर सकता हूँ page size और total result स��
10:18
और इसके बाद मैं ये पता लगा सकता हूँ कि क्या मेरा जो अगला page है वो खाली होने वाला है कि नहीं होने वाला है ठीक है तो सबसे पहले तो हम लोग क्या करेंगे page size को set करेंगे 20 ठीक है मैं 2 set नहीं करूँगा and page size is equal to 20 set करूँगा यहां पर page size is equal to 20 set करेंगे और यह��
10:48
page size is equal to 20 कर देता हूँ तो तीनों जग़ा page size 20, 20, 20 आणि कि हमारे एक page पर 20 articles दिखने वाले है��
10:55
अब next page exist करता है कि नहीं करता है वो मैं कैसे पता लगाओंगा मैं वो पता लगाओंग��
11:01
total number of articles जो हैं मेरे वो जो होंगे divided by page size जो है मेरा उसका जो math.seal होग��
11:10
अब ये math.seal क्या होता है यह भी मैं आपलोग को बता देता हूँ 4.6 का math.seal 5 होगा 5.8 का 6 होग��
11:17
math.seal जो है largest integer जो है वो return करता है जो उस number के बाद आने वाला ह��
11:24
तो हम math.seal को कैसे इस्तमाल करेंगे यह भी मैं आपलोग को दिखा रहे था तो page 1 हो गया और total number of articles जो है वो भी मैं state में update कर दूँग��
11:31
तो अभी के लिए तो यहां पर कुछ भी नहीं है हमारी state set state में मैं क्या करूँगा जैसे component did mount होग��
11:37
total articles को मैं कर दूँगा कितना total articles को मैं कर दूँगा यहां पर जितने भी total articles मेरी ए top headlines दे रही है उसके बलाबर कर दूँग��
11:47
तो यहां पर अगर मैंने total articles को जो मेरा past data है past data dot
11:55
मैं आपर sample response में देखता हूँ कि क्या मेरा total article ह��
11:59
किस नाम से total results नाम से तो total results तो past data और total results
12:04
तो मैं एक काम करता हूँ तो total results नाम से ही set कर देता हूँ तो total results भी हमारी state के अंदर आ चुकी ह��
12:10
state के अंदर हमारी total result भी आ चुकी है अब मैं क्या कर सकता हूँ कि जब मैं next पर click रहा हूँ त��
12:16
मैं यह पता लगा सकता हूँ कि next page है की नहीं है और मैं यह काम तब ही करूँगा जब next page ह��
12:21
तो मैं क्या करूँगा यहाँ पर if जो हमारा total result ह��
12:25
जो हमारे total number of results है divided by page size, जो हमारा page size है, ठीक ह��
12:31
जो कि हमारा 20 है, भी मैं इसको hard code करूँगा यहाँ पर तो मैं यहाँ पर this.state. कर देता हू��
12:37
तो जो total result divided by 20 है, उसका जो math.seal होगा, ठीक ह��
12:42
तो मैं यहाँ पर math.seal यूज़ करूँगा math.seal क्या होता है, math.seal 4.6 का 5 होग��
12:49
जो अगला बड़ा integer है वो return कर देगा, ठीक है तो यह जो अभी मैंने यहाँ पर लिखा है math.seal of this
12:54
कि total number of pages होंगे, कितने pages चाहिए हैं हमारे सारे results को, लेकिन जो हमारा अभी page पर हम जाने बाले है��
13:02
यहाँ कि this.state.page plus one, यह अगर हमारा बड़ा हो जाता ह��
13:08
किस से, equal हो जाता है तो कोई बात नहीं है, अगर बड़ा हो जाता है तब हम लोग क्या करेंगे, तब हम लोग कुछ नहीं करेंगे, तब हम लोग यहाँ प��
13:16
कुछ इस तरह से करेंगे, ऐसे करेंगे, और कुछ नहीं करेंगे वरना हम लोग कुछ ऐसा करेंग��
13:25
तो आप लोग देखो यहाँ पर, मैंने इसको एफ एल्स में डाल दिया है, अब मैं अगर आप लोग को यहाँ पर दिखाऊं उपनी आप को
13:31
मैं अगर next पर क्लिक करूं, next पर क्लिक करूंगा, तो ये बदलना चीज़िए था, बड़ नहीं बदला
13:38
आप पर एफ एल्स स्टेट्मों में कुछ गरबर कर रही है, तो मैं चेक करूंगा अपने लोजिक को, यहाँ पर कोई एरर तो नहीं आ रहा है
13:44
आप पर एफ एल्स स्टेट्मों में कुछ गरबर कर रही है, तो मैं चेक करूंगा अपने लोजिक को, यहाँ पर कोई एरर तो नहीं आ रहा है, तो मैं चेक करूंगा अपने लोजिक को, यहाँ पर कोई एरर तो नहीं आ रहा है, तो मैं चेक करूंगा अपने लोजिक को
14:14
तो मैं चेक करूंगा अपने लोजिक को, यहाँ पर कोई एरर तो नहीं आ रहा है, तो मैं चेक करूंगा अपने लोजिक को, यहाँ पर कोई एरर तो नहीं आ रहा है, तो मैं चेक करूंगा अपने लोजिक को, यहाँ पर कोई एरर तो नहीं आ रहा है, तो मैं चेक करूं��
14:44
को मुझे class name is equal to set place करना है, replace all करूंगा, save करूंगा, अब यह एरर चला जाएगा, अब देखो यहाँ प��
14:51
reload करूंगा इसको तो यह एरर चला जाएगा, और अब मैं यहाँ पर क्या कर सकता हूँ, next पर क्लिक करूंगा अगर, तो मुझे यहाँ पर और news देखने को मिल रही है, अगले next पर मैं क्लिक करूंगा तो यह नहीं होगा, ठीक है, यह नहीं होगा, अगले next पर यह मुझे ��
15:21
अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा
15:51
अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा, अगले यह नहीं होगा
#Computer Education
#Technology News