Up next in 10
Looping through an array in JSX to display NewsItems from state _ Complete React Course in Hindi #26
292 views
Feb 10, 2024
The video "Looping through an array in JSX to display NewsItems from state _ Complete React Course in Hindi #26" likely demonstrates how to iterate over an array of data in JSX to display NewsItems stored in the component's state, within a React course presented in Hindi. In this tutorial, viewers are guided through the process of dynamically rendering NewsItems components based on the data stored in the component's state. The instructor may explain the use of JavaScript's map function to iterate over the array of data and generate JSX elements for each item. Through step-by-step instructions and practical demonstrations provided in Hindi, viewers can understand how to efficiently loop through arrays and render dynamic content in their React applications. This video aims to equip Hindi-speaking audiences with the skills needed to create dynamic and responsive user interfaces in React by leveraging array iteration in JSX.
View Video Transcript
0:00
So guys, अपने पिछले वीडियो के अंदर हम लोगों ने ये देखा था
0:02
कि किस तरह से हम लोग ये जो हमारी news app है इसके अंदर, states को set कर सकते हैं, props को set कर सकते हैं
0:08
इस वीडियो में अब हम एक ऐसा काम करने वाले हैं, कि आप लोग भी बोलोगे
0:12
मज़ा आया, जो कि आप जब सारे के सारे images और news popularity की तो मज़ा आएगा ही आएगा ठीक है तो देखते हैं इस मज़ा को कैसे लिया जाएं तो हम क्या करेंगे यहाँ पर एक error सा आ रहा है जीब सा something is already running on port 3000 अच्छा मैंने दो बार run कर दिया शायद कोई बात नहीं एक delete कर दिया मैंने तो यह � क��
0:44
मैं आप लोगों को दिखाता हूँ जो हमारा sample output था इसके अंदर के जो articles है in fact
0:49
इन articles को हमने news news.js के component के अंदर डाला हुआ था ठीक ह��
0:54
पता नहीं क्या क्या निकल रहा है मूँसे तो हम लोग क्या करेंगे क��
0:58
articles is equal to ये चीज मैंने करी ठीक है और ये एक array ह��
1:13
करना है यहां पर दिखाना है ठीक है तो सबसे पहले तो मैं क्या करूंगा यह दो यह दो आर्टिकल्स जो है इनको मै��
1:18
हटा दूंगा ठीक है एक चीज आप लोगों मैं यहां पर बताता हूं यह डिव क्लास ने मिजीगल टो रो के अंदर मैं जितन��
1:23
भी कॉल md4 डालूंगा यह अपने आप अपने आपको ऑटो अलाइन कर लेंगे दिखा देता हूं इस चीज आपको देखो मै��
1:28
इतने सारे आर्टिकल्स कंट्रोल डी करके रेप्लिकेट किए और इसको मैं रिलोड करता हूं हां देखो यह सार��
1:32
इस तरह से display हो गए पर ये सारे के सारे same articles है मुझे क्या करना ह��
1:37
कौन से articles display कराने है this.articles में जो articles है वो display कराने है ठीक ह��
1:41
तो Ctrl Z करके इस चीज़ को जल्दी से undo कर दूँगा ये सारे जो मैंने articles रखे हुए ह��
1:45
सिर्फ एक रखूँगा अब सिर्फ एक रखूंगा ठीक है यह वाला डिव रखूंगा बस और बाकियों को रहने दूंगा और यह वाला डिव भी जो है ना उसका इमे��
1:53
आर्ट कोड नहीं होगा वह दिस टॉट स्टेट डॉट आर्टिकल से आएगा ठीक है दिस डॉट स्टेट डॉट आर्टिकल तो कैसे किय��
2:01
आई ट्रेट आर्टिकल्स को तो मैं क्या करूंगा कि सबसे पहले तो यह ब्राकेट लगाऊंगा लिखूंगा दिस डॉट स्टे��
2:07
डॉट आर्टिकल्स ठीक है यह क्या है दिस डॉट स्टेड डॉट आर्टिकल्स क्या है यह सारे के सारे आर्टिकल्स ह��
2:14
अब मैं क्या करूँगा लिखूंगा dot map ठीक है map क्या है higher order array method ह��
2:19
आपको क्या करना है इसको एक arrow function देना है तो मैं क्या करूँगा एक arrow function दूँग��
2:24
इसको सबसे पहले मैं जो मेरा arrow function है उसकी body लिख लूँगा यह इतना मैंने arrow function दिया ह��
2:28
प्राक्ट पेर कलराइजर जो मैंने यूज किया हुआ है उसका सबसे बढ़िया जो मुझे काम लगता है वह यह होता before
2:35
ग्रीन कलर से इसने दोनों को मार्क कर दिया रेड कलर से इन दोनों को मार्क कर दिया पता जा जाता है कौन स��
2:39
एक रिकॉल रहा है बंद हो रहा है ठीक है तो मैं आप इस सिंपली एलिमेंट लिखूंगा यह एली एमी एंटी एलिमें��
2:46
लिखा मैंने यहां पर और मैं यहां पर दिख दूंगा कंसोल डॉट लॉग एलिमेंट और मैं आप लोगों यह दिखाना चाहत��
2:51
कि console पर हमारा element log हो जाएगा यानि कि ये जो object ये log हो जाएग��
2:56
console पर दिखाता हूँ आप लोग को मैं तो मैं अगर यहाँ पर खोलूं इसको console को अपन��
3:00
तो आप लोग देखो यहाँ पर ये सारे के सारे elements log हो गए object object object
3:04
object चार objects log हो गए और यहाँ पर यह कह रहा है expects a return value from arrow function
3:09
तो यह basically मुझे से यह कह रहा है कि जो इसकी return value है वो अगर आपको use करनी ह��
3:14
arrow function return console log objects news objects objects
3:26
एक, दो, तीन, चार, हाँ या यह सिर्फ चार है, जादा लग रहे थे मेरे को पहले
3:31
बट कोई बात नहीं, चार है, ठीक है, तो चार news objects को, news items को हमें यहाँ पर जो है
3:36
display कराना है, कहाँ पर display कराना है, हमें कुछ ऐसे display कराना है कि यह row के अंदर रहे
3:41
तो मैं क्या करूँगा कि जहाँ पर मैंने console.log करके लिखा हुआ ये element
3:46
वहाँ पर मैं क्या करूँगा कि ये चीज return कराऊँगा तो मैं सबसे पहले तो row के अंदर डालूँगा इस चीज को ठीक ह��
3:51
और मैं console.log नहीं करना चाता in fact मैं console.log जहाँ पर हो रखा ह��
3:56
वहाँ पर मैं चाहता हूँ कि मैं return करूँ, क्या return करूँ, मैं ये चीज return करना चाहता हूँ, ठीक है, तो यहाँ तो मैं लिख सकता हूँ return कुछ इस तरह से, ठीक है, और उसके बाद मैं क्या करूँगा, सबसे पहले मैं सिर्फ इतना दिखाता हूँ आप लोगों को, इसे चा��
4:26
यूनिक की प्रॉप होना चाहिए यूनिक की प्रॉप का क्या मतलब है कि आज जब भी आप डॉट मैप यूज करते हो राइटरे��
4:33
करते हो एलिमेंट्स को तो हर एक एलिमेंट को एक आपको यूनिक की देनी पड़ती है क्या चीज यूनिक है मेरी मेर��
4:40
यू रेल यूनिक है कौन सा यू रेल यूनिक है इमेज इमेज का नहीं है सिर्फ यू रेल जो मेरा न्यूज का यू रे��
4:45
और मैं क्या लिखोंगा यहां पर एलिमेंट डॉट यू रेल मैं डिस्ट्रक्शन भी यूज कर सकता था यहां पर मैं लेक��
4:51
नहीं कर रहा हूं मैं थोड़ा सा इजी रखना चाहता हूं लोगों के लिए जिनकी जावास्क्रिप्ट कच्ची है ठीक ह��
4:55
डिस्ट्रक्चरिंग कर लेंगे भी थोड़ी दिर में बट देखो मैंने यहां पर एलिमेंट डॉट यू आर लिख दिया यहां प��
5:00
तो मैं टाइटल की जगह क्या लिखूंगा टाइटल के टाइटल की क्या यहां पर टाइटल की की टाइटल या डिस्क्रिप्शन की डिस्क्रिप्शन है तो टाइटल इस इकल टाइटल लिखूंगा डिस्क्रिप्शन इस इकल डिस्क्रिप्शन लिखूंगा न्यूस डॉट ��
5:30
यूआरल टू इमेज यह ऑटोमाटिकली देखो यहां पर कितना स्मार्ट है मुझे ऑटोमाटिकली दे दे रहा है यह भाई देखो आपकी स्टेट में यह चीज ह��
5:37
आप URL to image यूज कर लो इसका नाम URL to image है तो काफी convenient हो जाता है visual studio code को यूज करना अब यहाँ पर देख��
5:44
यह जो appaltu space है इसको मैं हटाऊंगा इसको भी हटाऊंगा क्या यह मुझे चारो articles देगा यार देना तो चीज़ें बिना error क��
5:50
बट मैं इसको रिलोड करके देखता हूँ कि आइए मुझे चारो आर्टिकल्स दे रहा है भी भी मुझे से कह रहा है कि इस चाइल्ड इन एलिस्ट शुट आव यूनिक की प्रॉब तो चेक द रेंडर मेथड ऑफ न्यूज तो यहां पर यह मुझे क्यों अभी भी एरर दे ��
6:20
सारे error हमारे खाली हो चुके हैं, ये hello, I am a constructor from news component
6:24
मैंने just आपको दिखाया था, अभी देखो यार, लग रहा है कि हाँ यार, हम कुछ पढ़ रहे हैं
6:28
और read more पर click करके, मैं चाहता हूँ कि, नई टाब में पूरी news ही खुल जाए
6:32
ठीक है, यह मैं कर सकता हूँ कैसे कर सकता हूँ इस चीज को news URL to do news URL element URL catch news URL URL use
6:51
अब मैं इस जो news URL मैंने pass किया है, news से, यह news URL जो pass किया है
6:55
मैं इस news URL को यहाँ से पकड़ूंगा, और यह जो href है इसका
6:59
इसको मैं news URL कर दूँगा, और अगर आप href में target is equal to underscore blank करते हैं
7:05
तो क्या होता है, कि नई tab में खुल जाता है पूरा article
7:09
तो मैं इसको save करूँ, अगर आपको दिखाऊं, अभी reload करके, तो देखो, मैं यहाँ पर इसको खोल रहा हूँ, तो यह नहीं खोल रहा है
7:14
News URL नहीं आया है, यहाँ पर इसको reload करता हूँ, अब देखता हूँ यहाँ पर क्या दिक्कत आ रही है
7:18
तो News URL इसके href में नहीं आया है, href is equal to News URL, ओके, तो मैंने एक गर्बर कर दी
7:23
कि मुझे news URL as a JavaScript object देना है कुछ इस तरह स��
7:28
as a JavaScript देना है sorry not object as JavaScript देना है क्योंकि news URL is a JavaScript variable
7:33
ठीक है अब आ जाना चाहिए यहाँ पर देखो अभी अगर मैं read more पर click करता हू��
7:38
कुछ नहीं हो रहा है देखता हूँ क्या गलती हुई है मुझसे कि यहाँ कोई गलती हुई है तो यहाँ पर न्यूज यूआरल है नहीं शायद एम नॉट शूर ए एचर एफ बिल्कुल भी कुछ नहीं ह��
7:48
इसकी हो रहा है देखता हूं इस चीज को तो मैं इसको बंद करूंगा कंसोल को और यह न्यूज यूआरल इस डिफाइंड ब��
7:55
नए वर यूज्ड ऐसा क्यों बोल रहा है यह चीज मैं देख रहा हूं रिलोड करता हूं इसको मैं दोबारा से और देखत��
8:00
हूं कि क्या यहां पर मैं नई न्यूज में जा रहा हूं कि नहीं जा रहा हूं अगर इसको राइटली करके इंस्पेक्ट कर��
8:05
यहां पर न्यूज यूअरल सेट नहीं हो रहा है विच इज बाड़ न्यूज ठीक है देखते हैं कि क्या यहां पर न्यू��
8:10
यूअरल नाम की चीज है नहीं न्यूज यूअरल नाम की कोई चीज नहीं यूअरल है तो मुझे यहां पर एलिमेंट डॉट यूअर��
8:15
ना बड़ेगा यह गलती मैं कर रहा था ठीक है तो मैं इसको रिलोड करूं अगर तो रिड पर क्लिक करके मैं उ��
8:21
न्यूज़ पर जा सकता हूं ठीक है अभी न्यूज़ क्यों नहीं खोल रही है मुझे नहीं आ लूं यह वाली न्यूज��
8:25
अब देखो अभी सारी के सारी news खुल रही है यह देखो मैंने यह वाली news खोल��
8:29
यह news भी खुल रही है ठीक है सारी news अभी खुल रही है अलग अलग external news मैं खोल पा रहा हू��
8:34
इन individual read modes पर click करके अच्छा एक चीज यहाँ पर मुझ��
8:39
थोड़ी सी खटक रही है वो पता है क्या अब वो आपको खटक भी सकती है नहीं भी खटक सकती ह��
8:42
हो सकता है आपको वो चीज़ अच्छी लगे ठीक लगे मैं आपे क्या करना चाहता हूँ कि ये ज��
8:47
description है इसको मैं limit करना चाहता हूँ कुछ characters तक और मैं डॉट डॉट करक��
9:09
रखना चाहता हूं नंबर आपके रेटर्स इतने या फिर इतने रखना चाहता हूं इतने इतने काफी नंबर आपके रेटर्��
9:15
तो मैं यह कॉपी करूं इसको मैं इसकी लेंथ देखूंगा और बात है इसकी लेंथ पर कैसे देखूंगा माय टेक्स टोट कॉ��
9:21
देना अब देखो जरूरत पड़ गई अपनी दूसरी रियाक्ट आप में अपनी पहली रियाक्ट आप को यूज करने की तो देख��
9:27
यहां पर कितने कैरेक्टर से 88 कैरेक्टर है तो एडिट कैरेक्टर्स लूंगा सबके और 88 कैरेक्टर लेने क��
9:33
क्या करूंगा कुछ इस तरह से लिखूंगा तो मेरी जो यहां पर टाइटल है मैं लिखूंगा एलेमेंट टाइटल टॉट औ��
9:39
मैं यहां पर लिखूंगा स्लाइस और स्लाइस लिखने के बाद मैंने कैप्सटॉक दिखा दिया लगता है गल्दी से हा��
9:44
और मैं यहाँ पर लिखूंगा start number 0 हो जाएगा, end number मेरा कितना हो जाएगा, कितने characters लेने थे मुझे
9:49
text utils ने बताए, 88 characters, ठीक है, तो मैं 88 characters लोगा, यहाँ पर 88 लिख दूँगा
9:54
and that about it
10:24
title के कितने लेने थे मुझे, title के 45 लेने थे, तो title के 45 characters
10:30
और थोड़े कमी लूँगा ताकि मैं आपर dot dot लगा सकूँ, अपने news item में
10:35
अभी तो देखता हूँ कि यह काम भी कर रहा है कि नहीं कर रहा है, यह काम कर रहा है, बट यह दो line ले रहा है
10:40
ये तीन line ले रहा है, इसकी image थोड़ी उंची नीची है, तो वो चीज भी हमको देखनी पड़ेगी, ठीक है, बट अभी ये uniform लग रहा है, काफी uniform लग रहा है, तो मैं काम करता हूँ, triple dots लगा देता हूँ, news item के अंदर, अब एक बात और बताऊँगा, triple dots लगाने के बाद, क��
11:10
maybe आप बाद में जब ये app पूरी complete हो जाए तो मुझे गिटट पिक पूल रिक्वेस्ट मार सकते हो इसकी काम करक��
11:15
पर अभी के लिए मैं जो है इसको short रखना चाहता हूँ तो देखो अभी काफी uniform दिख रही ह��
11:20
news monkey top headlines ये हमारी top headlines है चार top headlines हमें यहाँ पर दिखाई दे जाएगी, कोई भी पढ़नी है, मुझे मनलो यह पढ़नी है, cricket essay wants to get to the bottom पढ़नी है, तो यह देखो यहाँ पर news 24 का article आ गया, और मैं इसको पढ़ सकता हूँ अब detail में, ठीक है, तो कुछ इस तरह से हम लोग loop कर सकते हैं अपने this.state.articles को
11:52
और अगर मैं endpoint को hit करना चाहता हूँ अपनी API को इस्तेमाल करके, तो मुझे use करना पड़ेगा, या तो fetch API का
11:58
या अपना मुझे use करना पड़ेगा, अपनी Axios वगैरा का HTTP calls मारने के लिए
12:06
तो हम लोग fetch API भी use कर सकते हैं, Axios भी use कर सकते हैं, देखेंगे किस तरह से हम लोग इसको dynamically fetch करें ताकि हर बार जब हमारा user आए तो उसको current news मिले
12:16
for example आप यहाँ पर देखो कि यह जो articles है, इनकी जो date है, वो अभी recent ही है
12:22
हम नहीं चाहते कि user हमारा 10 साल बाद आये और उसको जो article की date मिले, वो मिले 2020 की
12:27
जबकि वो जी रहा हो वो 2028 में ठीक है तो 8-10 साल के बाद भी latest news अगर fetch करवानी ह��
12:33
तो हम use करेंगे fetch API को और news API को news API से लेकर आएंग��
12:39
fetch API की साहिता से सादी के सादी latest news तो ये काम हम लोग अगली वीडियो में करेंग��
12:44
और अभी के लिए I hope कि आप सभी को मज़ा आ रहा है अगर आपको आनन्द आ रहा है तो नीचे कॉमेंट में लिखें कि आनन्द आ रहा ह��
12:50
अभी के लिए इस वीडियो में इतना है guys यहाँ पर क्लिक करके इसको सेव जरूर करना प्लेलेस क��
12:54
बिल्कुल करके बुकमार्क भी कर लेना अभी के लिए इस वीडियो में इतना है गैस थैंक यू सो मच गैस बुवाचिंग इस वीडियो एडियो नेक्स्ट टाइम ��
#Other