Context API in React JS in Hindi in 2020 #51

React Context API is a way to essentially create global variables that can be passed around in a React app. This is the alternative to "prop drilling", or passing props from grandparent to parent to child, and so on. Context is often touted as a simpler, lighter solution to using Redux for state management.
In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
************ Must Watch Videos For Web Development ************
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: • #30: Hooks in React J...
➡️ React DevTools & Source Code Link: www.thapatechnical.com/2020/0...
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: • ReactJS JavaScript Arr...
➡️ Fat Arrow Function in JavaScript in Hindi 2020: • ES6 Tutorial #8: Fat A...
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...

➡️ Install VS Code for ReactJS LINK: www.thapatechnical.com/2020/0...
➡️ Check Complete Reactjs in One video here 👇 • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechnical.com/2019/1...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter KZbin Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechnical.com
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: vinodbahadur...

[@ThapaTechnical]

Guys, Finally video after 2 long days :) everything is fine now... Hope you like the video :)

[@tarunjoshi1106]

Sir COVID 19 india ke api ka use krke React Js mai bhi bnao 👌☺️ Jo data ko display kre properly 😋👌

[@tarunjoshi1106]

🤣🤣🤣 wtf I was doing 2 months ago.

[@letsknowthis1862]

hii vinod your doing very good job we are fallowing your tutorial but it is not good to ask money in the middle of the cousre for code you can do live coding we will super chat you..hope you understand

[@mananbari4725]

@Thapa%Technical Can you please make a video for Global state Context and Hooks

[@sallbro4134]

const Firstname= useContext (); when I am exporting Firstname Showing:- Export 'Firstname' is not defined

[@fayeazahmedrhythm7460]

Vai, amazing. I just got to context api two days ago, watched some videos, and was confused. A lot of things got cleared after watching this video, waiting eagerly for the video on useContext. Thank you!

[@ayyasudeen3118]

Bhai, I am a Tamil. My Hindi is average but I am able to understand your tutorials very well. You are an amazing teacher! Thank you very much!

[@entertainmentcreations7661]

You need to learn Hindi bro

[@raviiirathore9984]

​@@entertainmentcreations7661 Why he should learn Hindi ?

[@pradattaaryal3523]

@@raviiirathore9984vinod is from nepal pokhara

[@luffydono0]

@@raviiirathore9984 bcz i am in karnataka they are forcing me to learn kannada so he need to learn HINDI.

[@yashtechofficial6724]

Finally Confusion got clear .Thanks for Making such types of videos...

[@Globalnewsalert]

your method is very amazing thank you so much dill kya aj comment krny ko you are best teacher Allah apko hmsha slamat rkhy FROM PAKISTAN

[@akashvenu359]

I like the part when you say "boom guys"..Thank you for the superb content

[@sweekardahal9811]

You're a great teacher . I really appreciate your videos .

[@tejendrarajawat4054]

Your lectures are very underrated 👍

[@sugandhasharma5484]

Excellent!!! bade bade Technical youtubers fail hain aapke saamne Sir.

[@binodkhatri7738]

Thankyou ,,awesome video, easy to understand, keep providing this kind of video❤

[@fansofmahabharat4399]

Kamal ka technical methode bro learn only in this video context api

[@aniketmasram6500]

Thank you soo much bhaiya, you are the real provider ❤️🙏🏻

[@zakiasultana1234]

U made everything easy.Lots of thanks and respect.No doubt u r the best of best.

[@major7055]

that was very simple and easy to undestand, thankyou

[@raunak0811]

best explanation i got after watching 20 videos

[@gmmkeshav]

Wa Vinod bhai you killed it

[@prateek4524]

amazing explanation thankyou so much..🔥💪💪

[@lokeshnaidu1935]

You're awesome man, Very simple and cool explanation

[@rajat-s-kale1771]

Your teaching is awesome bro

[@deepikakapoor9607]

Thank you so much ☺️ n voice ko edit kiya hai na apne.. bold acha lag rha hai

[@debopamseal1072]

Ghanto waste hone se bacha diya. Succinct and informative!

[@harshKumar-sr4mw]

Great explanation sir thanks for this

[@irushabasukala871]

hellooo,Thapa technical!! you have explained so simply ,Thank youu and btw,your name seems to be Nepali?

[@periodictech4248]

Bhot easy explanation kia h.. Thanks

[@electroviper5931]

2:11 most funniest part of this tutorial so far 😆

[@nicetomeetugaming7024]

Amazing video boss!

[@Niteshmaurya1234]

bhai mast video thi ek dam samjh a gaya

[@umaphalke5786]

It helps me alot thank you👍🏻

[@webdeveshverma3214]

love u sir ji maja aagya topic clear

[@88advait]

Amazing explanation..!

[@mr.ramnani]

oh godd loved that example xD

[@pratikfulkar4335]

bhai bhai jabardast maza hi aa gaya

[@dishashah4197]

Great explanation 👍

[@covidnineteen5249]

Sir love your videos.Sir ek local storage pe video bnaoge pls

[@rahulpanchal6399]

Hi, can u please arrange a tutorial for persisting redux state with multiple reducers. Thanks in advance.

[@abdullahanwar8064]

sir 1 confusion ha kay jab app.jsx main saye data export ho kar component C main show ho raha tho ap nay firsname context kay ndr compA ko kun rakha is matlab data tho link ha dubara hum agar

[@AdityaG.]

"Context Hell" could be the perfect word... BTW great video..thanks

[@AnkitKumar-yf6wd]

Thank you so much sir .

[@04.nehalsingh12]

awesome tutorial sir

[@yashkore7030]

bro ur explanation is super and each video is uploading morethan 1time in the playlist can u resolve this issue

[@anandgomaskar2210]

thanku so much upload this video it 's need

[@user-lj2sx7rg9f]

Rendering directly is not supported and will be removed in a future major release. Did you mean to render instead? I get this error what do I do?

[@tarunjoshi1106]

Sir COVID 19 india ke api ka use krke React Js mai bhi bnao 👌☺️ Jo data ko display kre properly 😋👌

[@knowledgeera3210]

why we are passing in Context as we are not using that in cosumner

[@12rehanglasswala90]

Amazing

[@nikhil007g]

App m context h to aagar context ki value change hogi to sirf c refresh hoga ya a b and c ?

[@AdityaVerma-fv5ne]

Thanks Sir , This helped me a lot .

[@rajbannasa7662]

thank you so much sir

[@mahmad8538]

Helpful 😇

[@CodeWithSajjan]

thapa bhai please also create a mega project using react js like ecommerce web app or chat app

[@adnanyousaf4862]

Brother I want to ask one question can you help me (I am perfect in frontend development but I am weak in programming logic building) can you help me

[@abcool0801]

yahe to chahiye tha ab start hui h asli react to

[@thegorillaz4759]

Thank u so much

[@sumitkawale9878]

we can create a variable with value and export it and directly access it in any component, then why we need this. In both cases exporting and importing is required. ulta simpla variable se code kam ho jayega..

[@ranjanvashist321]

And boom guys😍

[@shibinraja]

Bhai how come this is call back hell , we are not passing a function as an argument to another function where we will return the parameter and call the previous function indefinitely. I think the most suitable thing to refers is high order function which accepts a parameter as function and returns another functions. Btw , learned a lot from you. Thank you and keep going.

[@solmindaudy]

Everything is at its best . Just stop using the word "PURRRFECT" ;)

[@shoaibz1112]

Is there any way to find child components which using same props from upper level.

[@samliprajapati7383]

Hii apki vedio bht achi hai kya apne Real dom vs virtual dom ka vedio bnaya hai to plss mujhe uska link forward kariye agar nahi to please ap ispe ek vedio bnaiye mujhe av tk thik s samjh nahi aya hai real dom or virtual dom m difference kya hai

[@DeepakGupta-hj2dv]

Flux pr video kab aayega....flux implementation

[@dineshgaur1409]

Please add a video for context api with reducers

[@deepaksharma69]

14:15 We have already export default App then why we need to export the FirstName again?

[@pramod6844]

Hi Vinod, instead of createContext() with variable can we do it by array?

[@periodictech4248]

Yes... Any object can be passed as parameter

[@sumitkanth5349]

How you will make array ?

[@madhavjha844]

Ye code react 18 me kaam nahi kar rha, context api ko react 18 me remove kar diya hai kya ??

[@jatinyadu9183]

Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. why this error occured

[@sedmochill4707]

😂 this specific tutorial is funny bcs of those errors

[@hamzailyas8632]

I am getting this warning when i am returning any thing inside the Consumer. How can I solve this ? Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it

[@shafihussain5282]

Thanks bro

[@nomanahmed4085]

please make video on UseReducer.

[@hemanttopi1]

Can I pass data throw props. And how will be achieved. I am tried but not success

[@RohitKumar-dz8dh]

Thanks

[@innovative-thoughts]

useContent can be used out of the component? I'm doing so but getting error. Following the same method but getting an error on export { DataVar } "Parsing error: Export 'DataVar' is not defined" Please guide me. Thanks

[@steplittle3516]

sir can u help me why value show undefined please check the code codesandbox.io/s/winter-moon-1zhmw?file=/src/App.js i have same problem sir can u help me

[@shibinraja]

@@steplittle3516 i cant see any prob in your file , you have used useContext to set up a consumer to Tab component

[@mukulchaudhary8914]

bro, please tell me how do you multi-line typing

[@aliadnanasim4420]

sir extention bta dain please apnay nichay createContext likha pr wo opper khud hi likha gaya is extention ka name bta dain plzz

[@banditalks]

Bro we can use props right i mean we can import component C in app.js and add some props we can use same props in compC by importing App right.... is that wrong practice????

[@rehanhamayun1353]

its better idea

[@shibinraja]

if you import compc , the details provided in com a and comb b wont be available in screen coz your providing directly and updating in virtual dom. Since, Vinod hasn't done anything in Com A and Com B , you thought it will be easy to import that, but if it has values in it. We have to use state management.

[@ujjwaljain9780]

why my component is rendering when i passing "hello world " in compA and calling comA in App.js ,anyone have any idea

[@jies933]

Thankss

[@MANISH-nb8wb]

Hello sir,please make video for photo resizer

[@sandhyaaa24]

Difference between redux and context api?? there is no App.jsx file in my react app

[@shibinraja]

it might be named app.js , js is a defined term for javascript xml . either of this is perfect. Redux is a global state management which store the data in the store and we can retrieve the values in the component where it is needed in spite of the parent / children component. Context api also does the same but not meant for large scale . In company projects ots used to maintain theme , small arc in it which can be changed when needed but not frequently.

[@meriChhotiDuniya]

I couldn't understand why we are nesting all the contexts? Suppose we have a bunch of contexts.then?

[@kashmirtechtv2948]

Good

[@Vijaysah07]

Sir ap app developer ka series lekar aaiye

[@udupilohith]

please explain about Hoc in reactjs

[@tubetalk007]

3 2 1 and boom guys XD

[@abhilashmund]

💥 guys

[@rafiqn2675]

3 2 1 boom guys😄

[@AsifAli14280]

sir short videos bnaya krein plz

[@punjabikids2942]

I am not getting that why you import 'ComA' inside App.jsx and use while working with "createContext" . if I import either of ComB Or ComC inside "App.jsx" even then the project also works. Request to povide the Clarification on it Regards

[@skskssss126]

the main use of context is to drill or pass data to children component which is very complicated if you use props because you will have to pass props in every component in the hierarchy to get to the lowest component. That's why he made ComC so that he can show how to pass data from parent element i.e. App> ComA>ComB>ComC.

[@shantanukulkarni6360]

Please focus on naming convention also 11:15 .

[@mdzohaib7368]

I am getting an error- TypeError: Render is not a function. Can anyone help me!

[@kishor-jena]

child element kaise parent element ko value pass karega using contexts?

[@sushantrahane4512]

You can pass value by export import method also then why we use context api is it necessary?

[@anonymous2982]

Yes i have this doubt too

[@kushalthapa3548]

3 2 1 and boom guys. !!

[@shehrozetalat2617]

hard coded constant data yes, can be used via exports. But using context we can pass in states and setState method which constantly update.

[@forza2718]

"And Boom Guys " --ye bhi ek contest hai

[@nikhilnaidu1383]

And boom guys

[@htsscreatorshtsscreators7674]

Waiting for a website in react js

[@munendrasingh848]

how to create a code in asp.net core web Api for dynamic otp generated in my mobile number using swagger on post method and we will be save all field (as name , EmployeeId and Mobilenumber etc.. )in Db also , Plz Sir tell me it's urgent.

[@gauravojha7362]

Make video on react native

[@user-lw8gn8xb2t]

❤

[@nirvikar23]

please create tutorial on redux

[@tp-news2570]

why creating multiple consumer, we can pass data as object