[0:09]Welcome back to my channel, guys. Guys, to aapko ye pata hai ki humne last video mein ye ek country ka, okay, modal banaya tha yahaan par, jismein saari humne listing, display ki thi. Okay, abhi ye humara jo hai na, ye list humari static hai. Okay? Humne hardcode kiya hua hai and hum and ab hum iske andar API se data laayenge. Mere paas ek API hogi, okay, country ki jismein saari countries hoti hai humari and usi ko hum yahan par aaj ki video mein display karanae wale hai. Okay, friends and friends dekhiye, abhi tak humne itna header complete kar liya hai apna. Okay, jo ye humari playlist chal rahi hai. Dekhiye kitna awesome project hai ye. Okay? Ismein seekhne ko aapko na bahut kuch milega. Okay, to video se bane rahe and channel ko subscribe zaroor kar le and video ko like bhi kar dena, theek hai? Kyunki main aap sab ke liye bahut zyada mehnat kar raha hu. To friends, yahan par hum kya karenge? Dekhiye, mere paas ek API hai. Okay? And main agar isko browser mein hit karta hu. To dekhiye, mere paas sara ye data milta hai. Country ka data hai sara ye. Theek hai dosto? To main yahan par dikhata hu aapko. Ye wali API nahi thi, main aapko dikhata hu. Ek aur hai API. Country list ki hai na? Ye humara hoga. Components mein maine yahan par ek API add kari thi jab main last time E-commerce ki website bana raha tha to. Yahan pe likhi hai kya humne? Dekhiye, ye rahi. Theek hai na? To ye wali API hai humari. And main isko close kar dunga. Theek hai na? And ye wali main replace karta hu. Dekhiye, actual mein humare paas ye wali API milegi. Theek hai? And isko main agar yahan par karta hu to, dekho kya milega? Ye saari country hai dekhiye humare paas. Ismein kya hoga? Dekhiye, Afghanistan. Okay? And aur bhi hai. Theek hai na? To ye saari countries hai and humko yahan par display karani hai is modal ke list mein, theek hai na? To dekhiye, usko kaise karenge? Hum Axios ke through data yahan par get karenge. Aur wo hum banayenge iske andar, ye jo app ye app hai na humara, ismein context bana lete hai hum, theek hai na? Wo humare liye easy rahega. Context. Ismein aap context API bhi seekh jaoge ki context API kaise use karte hai React JS mein. Okay? Bahut easy hai.
[2:33]Pehle context ko create karte hai. Theek hai? And ye isko make sure aap React se import kar lo. Theek hai na? And isko le jaake humko kahan rakhna hota hai? Yahan par. Dot provider. Theek hai? And ismein maine wrap kar liya. Ye kya hoga ki and ye ek ye bhi pass hota hai yahan par. And values mein main abhi values dunga. Dekhiye, main samjhaunga aapko. Theek hai? Ab dekhiye, yahan par humne context create kar diya hai, theek hai na? And uske andar jo bhi hum value pass karenge, wo iske through koi sa bhi component ab use kar sakega. Theek hai na? Pehle kya hota tha? Humko agar humko ek parent se okay, uske child mein data agar chahiye, to wahan par na wo props ka through leta tha. Props, props, props karke bahut issue tha wahan par na. Ho to jata tha, but wo bahut lamba process tha, theek hai na? To isi ke liye humne context API use karte hai ki humne yahan par apne parent mein, okay, value yahan par set kar di and yahan par jo value humko pass karni hai, wo pass kar denge. Theek hai? And usko humko export bhi karna hoga aise. And isko ismein, theek hai na? Fine. And ab dekhiye, yahan par main ek state leta hu. Context. Country list and set country list. Okay? Set country list. Use state and ye array hoga humara. Theek hai na? Ab dekhiye, yahan par hum Axios use karenge. Make sure yahan par aap Axios use kar lo, theek hai na? NPM install Axios. Theek hai na? Ye maine pehle install kar rakha hai, but main dobara aapko dikhane ke liye install kar lunga, okay, Axios ka package. Theek hai na? And jab ye import yahan pe ho jayega, mujhe yahan par import karna hoga. Import Axios from, jab ye install ho jayega, to humko yahan par import karna padega, theek hai na? Axios. Theek hai na?
[4:37]And yahan par use effect lagayenge. Okay, jismein ek function call karenge. Get country naam se. Okay? And usmein ye API ka URL pass kar denge, theek hai na? And yahan par ye aayega. And iske baad ye function banayenge, theek hai? Const get country, URL. Okay? Jo yahan se pass hua URL. Jo yahan se ye URL pass kiya hai, wo yahan pe aa jayega, theek hai na? And yahan par hum karenge, const response. Is equal to, okay, await. Ye await to yahan pe async hona chahiye. Kyunki yahan se ye promise return karega, Axios hum use kar rahe hai to. Axios dot get URL dot then ye yahan se.
[5:37]Console dot log. Res dot data dot data. Okay? And dekhiye, hum yahan par check karte hai. Main yahan par inspect element open karta hu and jata hu network mein. Theek hai na? Dekhiye, ek API humari call hoyegi country wali. Dekhiye, ye call hui. Ye data aaya. And console mein dekhte hai to sara data humara dekhiye, list ka aa chuka hai, theek hai na? And wo hi cheez hum karenge yahan se. Theek hai na? And humne yahan par kya kaam kiya? Res dot data dot data. Theek hai na?
[6:14]Dekhiye, data mein humara ye sara data aaya tha humara. Dekhiye. Theek hai dosto? Data and humko country pass karni hai sabki. Ye pura object aa raha hai, theek hai na? Data dot country aa jayega yahan pe. Theek hai? Ab dekhiye, dot country main agar yahan par is console dot log karata hu na. Ek minute. Dot data ke baad.
[7:11]Kuch error aa gaya kya? Nahi. Dekhiye, Afghanistan yahan par aa chuka hai, theek hai na? To humko yahan se pura data hi humne pass kar diya. Theek hai friends? And ye humne ye state thi, ismein humne set kar diya, theek hai na? And ye values yahan par pass kar denge. Jaisa ki andar wala component koi bhi inko use kar sakega easily, theek hai na? And main yahan par aaunga header mein. And header mein humne lagaya tha country drop down, to yahan par ek condition lagegi. Context dot. Dekhiye, yahan pehle humko na ek context ko use karna hoga jo humne banaya hai pehle, theek hai? To yahan par hum use karte hai. Const context. Use context liya humne and usmein my context aa jayega, theek hai? App wala. Dekhiye, use context React se humne import kiya and my context wo wala hai jo humne app mein banaya tha and usko export kiya, theek hai?
[8:12]To yahan par maine use kar liya. Ab dekhiye, yahan par kya karte hai? Is component ko jab bhi main render karunga jab ismein data aa jayega. Yaani ki ye wala, theek hai? Context dot country list. Theek hai na? Context dot dot length is equal to 0. Theek hai? Jab hi ye component humara render hoga. Theek hai? And phir aate hai yahan par. Simple, ab kya karna hai mujhe? Ye lena hai, theek hai na? Yahan pe aa jayenge and dekhiye, yahan par humko kya karna hai? Use effect. Okay?
[8:51]Dekhiye, main pehle direct hi chala ke dekhta hu, theek hai na? Ye dekhiye, static hai humara. To main in sab ko pehle hatata hu, theek hai? And yahan par context context dot. Ye theek hai na? Dot. Length is equal to 0 and and. Okay? Yahan par chaining option dot map. Yahan par aa jayega item. Theek hai? Item yahan pe aa gaya.
[9:24]And yahan par return and return ke andar ye aa jayega. Theek hai na? And yahan par ek baar main phir check kar leta hu ki yahan par aa raha hai ya nahi aa raha hai, theek hai na?
[9:39]Agar data humara aa gaya to ye India na bahut baar humara print milega wahan par. Ye kya keh raha hai? Context is not defined. Theek hai na? Context yahan par bhi use karna padega humko. Const context is equal to use context. Okay? And yahan par my context. Simple. And main refresh karta hu ek baar. Main open karunga. Dekhiye dosto, data humara aa chuka hai. Okay? Bas humko yahan par kya karna hai? Main inspect element wo wala karta hu yahan se. Dekhiye. Main karta hu console. Okay? And uske andar dekhiye, array aa raha hai. And array ke andar humko kya likhna hai? Item dot country, theek hai? To mujhe bas yahan pe ye likhna hoga. Item dot country. Okay? And yahan par index aa jayega key. Index. Okay? Dekhiye. Very good. Ismein humari saari country print ho rahi hai, theek hai na? Bilkul very good, maza aa gaya. And ab humne itna to kar diya and yahan par active bhi to karna hai ki maine jo si select kari hai na, wo hi aani chahiye na?
[10:56]To main yahan par kya karunga? Dekhiye, yahan par on click pe yahan par ek function banate hai. Okay? And yahan par hoga us function ka naam hoga, select country and uska index, theek hai na? Index pass kar denge yahan se. Ye theek hai. And ye function yahan banayenge hum. Const select country, index. Okay?
[11:36]And yahan par ek state lenge selected ke liye ki kaunsa humne select kiya hua hai. Selected tab. Set selected tab. Use state. Pehle main karta hu null. Kyunki pehle koi sa select nahi aayega, theek hai? And yahan par seedha uska index. Theek hai dosto? And dekhiye, wo jis pe click karega, wo hi yahan par ismein update hota rahega.
[12:41]Dekhiye, 0, 1, 20, 30. Jis ko bhi select karega wo, yahan pe aa gaya. And wo update ho gaya, theek hai na? And ek kaam mujhe yahan bhi karna hai, is open modal. Is open modal ko false. False bhi to kar dena hai, theek hai na? And dekhiye, uske baad jaise ye change hoga na? And yahan par wo match karega. Jaise mano maine one pe click kar diya. Yahan aayega one. And yahan par jaise hi one milega na, us pe wo active class add kar dega. Main aapko dikhata hu.
[13:12]Dekhiye, abhi koi si active nahi hai. Main karta hu isko, theek hai na? Is wale ko jis pe mouse hai mera. And aap dekhoge, yahan par kuch nahi hai, theek hai na? Maine ye select kar diya. Ab main aata hu, dobara open karta hu. Ab dekhiye, main yahan par agar inspect element karunga na, to dekhna kya hota hai? Dekhiye, yahan par active class aayi kya? Hai na? Nahi aayi. To yahan par kya hua ye? Selected tab. Selected tab, sahi to hai ye. And yahan par ismein index ja raha tha, theek hai. Sahi hai ye to. Dekhiye, main ek baar selected tab ko na yahan par alert karata hu.
[14:24]Dekhiye, abhi a raha hai yahan par null. Main karta hu second wala select. Main select kiya. Main open karunga. Dekho. Waao guys, ye pura humara active kaam kar raha hai, theek hai? And maine select kiya ye wala Brazil. Theek hai? And main dobara open karunga, to yahan par kya selected aayega? Brazil.
[16:10]Theek hai friends? And iske baad hum karenge ismein search function, theek hai na? Yahan par hum country ko search bhi kar sakte hai. Okay friends? Chaliye, der na karte hue aage badhte hai, okay? To hum yahan par kya karenge? To hum pehle yahan par ek on change function banayenge, theek hai? And yahan par filter list. Okay? Ye function humne banaya. And yahan par const filter list. Event. Okay? And yahan par const keyword. Even dot target dot value dot to lower case. Pehle usko lower case karenge, theek hai na? Lower case mein humne usko kar diya. Theek hai? And jo value yahan par aayegi na, to hum yahan par kya karenge? Ek const list is equal to. Theek hai? Humko pehle yahan par na kya karna padega? State leni padegi do. Country list. Okay? And set country list is equal to use state and yahan par array. Okay? And ek le liya. And iska ek copy lenge. Nahi, ye lene copy lene ki kuch zarurat nahi hai, theek hai? And ye to humne kar diya yahan par. Okay? And yahan par lagayenge use effect. Okay? Use effect add kiya. And uske andar yahan par ye jo naam hai, context dot, ye. Theek hai na? Iske andar set kar denge jo list aayi hai na peeche se. Yahan se humne data get kiya tha and pass kiya. Koi sa bhi component isko use kar sakta hai, to maine yahan pe ek state banayi hai. And use effect mein yahan par usko add kar diya, theek hai na? And yahan par jo list yahan par aayi hai na? And jab hum on change pe filter list ka ek function banaya, phir wahan pe karenge. Dot filter. Okay? Item. Item. Return. Item dot to lower case. Okay? And dot includes keyword. Dosto, yahan par item dot country aayega. Theek hai? And ye jo list aayi hai na hum humare paas updated, to hum yahan pe kya karenge? Ye hi copy karenge line. Okay? And kahan pe kiya humne yahan par. Okay? Simple list yahan pe aa jayega.
[19:10]And ye jo hai dosto, humara country list and yahan se context hat jayega, theek hai na? Ab check karte hai ek baar zara hum. Dekhiye, data bhi aa raha hai. And main yahan se search karta hu India. Wow guys, yaani ke humara filter bilkul acche se work kar raha hai, theek hai na? Koi ismein issue nahi hai, theek hai na? And dekhiye, yahan par ek issue ab ye aa gaya, main agar India search karta hu na, ab saari list na empty ho gayi hai. Theek hai na? And yahan par ek cheez yahan par add karna padega. If keyword, blank nahi hai. To humari ye search hoga, theek hai? Otherwise, ye, theek hai? Samajh mein aayi? Dekhiye, main ek baar check karta hu. Ye list kahan gayi? List. Achcha. Yahan par list yahan par. Achcha. Yahan par aa jayegi list, theek hai? Dekhiye, maine refresh kiya dobara. Main jaunga yahan par India search kiya. Okay? Back kiya, dekhiye, pura data aa chuka hai. Pakistan. Afghanistan nahi chahiye. Mujhe India chahiye. Theek hai, very good, ye bahut sahi chal raha hai humara, theek hai? To dosto, humne dekha ki kaise humne ek API se data humne fetch kiya tha country list ka. Okay? And usmein aapne seekha ki Axios ke through hum API se data kaise get kar sakte hai, theek hai? And apne front end pe usko show kar sakte hai, display kar sakte hai, theek hai na? And humne saath hi saath ek cheez aur seekhi ismein achi, filter karna. Okay? Kisi list ko bhi filter karna, friends, theek hai na? To dekhiye, ye kitna awesome chal raha hai. Boom guys. Very good. Okay? To yahan par humara ye header ka part complete ho gaya hai. Bas yahan par drop down aur yahan par ye jo category drop down hai na, wo aur banani hai, theek hai na? And main usse pehle ek cheez karta hu yahan par. Usse pehle, main isko close isko close karta hu, usse pehle ye header wrapper jo hai na, header wrapper mein border bottom one px solid rgba 0.0.0.0.1. Yahan par maine ek border diya. Dekhiye, border yahan par aisa aa raha hai. To yahan par padding bottom 10 px. Ab dekhiye dosto, ab ye lag raha hai ki ye proper humara header ban chuka hai ab. Hai na? Dekhiye, kitna awesome lag raha hai ye. To aapne ismein bahut kuch seekhe honge. I hope, okay? And ye kaam bhi kar lete hai. Dekhiye, ye kaam bhi. Changing wala. Theek hai? Location yahan pe change nahi bata raha na? To uske liye humko kya karna padega? Uske liye dosto, yahan par ye country list hai. Yahan par, ye country list hai. Yahan par mainne state bana li. Okay? And yahan par usko pass karna hai.
[22:49]Theek hai na? Selected country. Theek hai na? To yahan par humne usko pass kar diya. To dosto, uske baad humko kya karna hai? Jaise hi maine yahan par koi cheez select kari hai na? Kya naam hai? Dekhiye, yahan par, theek hai? Select country. Dekhiye, yahan par ek index aa jayega. Ek item dot country bhi pass kar dete hai yahan se, theek hai? And yahan se hum karte hai. Yahan par, theek hai na? Plus karke. Ab dekhiye, jiski length badi hogi na, us par dot karke aa jayega and jiska chota hoga na naam bilkul, dekhiye ye wala, to wahan par pura sahi naam aayega. To maine ye condition yahan par laga di hai.
[26:30]Theek hai na? Dekhiye, kitna achha lag raha hai ab ye. To maine ye condition kya lagayi hai? Dekhiye, agar humara country list blank na ho, okay, and humara country list ki length 10 se upar hai na, to substring lagegi, otherwise jaisa hai waisa hi print ho jayega. Okay, agar ye ye blank milta hai, to yahan par ye aa jayega. Agar select nahi kiye to, theek hai? And friends, aaj ki video mein itna hi. I hope, aapko aaj ki video bahut bahut pasand aayi hogi. Okay? And please mere channel ko subscribe karna and video ko like karna na bhoole, okay? Main aapke liye bahut achhe achhe content aise hi aage bhi lata rahunga, theek hai friends? Okay, thank you for the watching this video.
