Passing Data from Child to Parent Components in React

In this video, let's learn how to pass data from child to Parent components.
We will have a look at how the callbacks are supposed to be created and used.
Please support us and subscribe to our channel -
/ knowledgekeen
#reactjs,
#reacttutorial,
#reactjsforbeginners
#passingdata
#knowledgekeen
#knowledge keen

[@BHARATHKUMAR-kp9ig]

great

[@KnowledgeKeen]

Thank you Bharat

[@SagnikChakraborty-e3q]

Thank You Sir!! Was Stuck Hard Since Last 2 hrs And Then Found This Video

[@KnowledgeKeen]

Happy that it helped you 😊

[@vishnuprakash8098]

Explained very well, Thanks

[@KnowledgeKeen]

Thank you so much 😊

[@blottolotto7648]

ur the man. exactly what i was lookin for

[@KnowledgeKeen]

Thank you ☺️, I am glad you liked it. Please subscribe and share

[@Chopkarmanoj]

Great knowledge

[@KnowledgeKeen]

Thank you @manoj. I am glad you liked it 😊

[@Tejaswini-mm1yc]

Thankyou so much for clear explanation..

[@KnowledgeKeen]

I am glad @Tejaswini you liked it. ☺️

[@midhungk1930]

best video .. keep up the good work

[@KnowledgeKeen]

I am glad you liked it 😊

[@snehalgawade-n9u]

Hello, Thanks for covering this topic. Could you please explain after state lifting how to use that data in the parent component which we have received from child component? (Now we can print that data in the console but how to access that data outside the function?)

[@KnowledgeKeen]

Hellozzz, Check this video, this videos does have parent child data passing. kzbin.info/www/bejne/n3TRcqFqar1_bKM And the easiest way to use the values post uplifting is save the same in local usestate variable. And thanks for the comment ☺️

[@Human_Only_]

so useful thanks a lot

[@KnowledgeKeen]

Glad it was helpful @Batool ☺️

[@mhassankhan8677]

great tutorial , are you gonna make more videos?

[@KnowledgeKeen]

Your wish is my command, a video is just uploaded and live 😉

[@haiderjaafer8164]

Great work... Can use this way with react-query

[@KnowledgeKeen]

Hey absolutely, react query is quite easy to use with this way too 😉

[@MIXKNOWLEDGEbylohith]

I have multiple array of objects (data I use to create multiple charts) in separate js file so now I have to import individual chart data and use that data to create chart in new js file could you please help me or if I am doing anything wrong please correct me.

[@KnowledgeKeen]

Hi @LOHITH Quite an interesting question. Just have a couple of ideas on top of my head. Basic and most straightforward approach:- Create multiple components and separate JS files with data for each of those components. For e.g If you have a component for the current population with a chart, create files PopulationChartComponent.jsx and PopulationChartData.js respectively. A bit advanced and complex approach:- This would be a bit complex but a more interesting way to do it, would be to create one single component which will render any kind of chart according to the configuration and data we provide dynamically. This way you can save creating an enormous number of components and even any future chart(new requirement) would be easily integrated just by modifying simple configurations. In this too you can have multiple or single data files. Hope this helps 😊 If you like this, kindly help us grow by sharing, subscribing, and hitting those likes

[@MIXKNOWLEDGEbylohith]

@@KnowledgeKeen Thanks for the help

[@KnowledgeKeen]

@@MIXKNOWLEDGEbylohith You are welcome :)

[@ssshwanth]

It is lifting state up

[@KnowledgeKeen]

Thank you for the comment, but I tend to keep it as simple as I can. But yes to those who will read this comment, yes it's also called as Lifting the state 🙂

[@shaimeur]

@@KnowledgeKeen lifting the state up is involving moving the state from the child component to the parent component in your example you have used the concept of passing data from child to parent using a call back function and it's not the same think correct me if I made a mistake and thanks for the share!!

[@KnowledgeKeen]

@shaimeur actually it is 😊. The only way to lift the state is using a call back in this case.

[@padmamuralikrishna1869]

Can you make a video on passing similar props from parent to grandchild

[@KnowledgeKeen]

Hey @padmamuralikrishna1869 , I have shown here how to pass data from Parent to Child ( kzbin.info/www/bejne/fYfOinl8praDqqM ) and passing data from Parent to Grandchild is done in a similar way. For e.g Parent.js const Parent = () => { const counter = 10; return } Child.js const Child = ({counter}) => { return { return Counter in GrandChild - {counter} } This concept is called Prop-Drilling and there are other ways to avoid this, which I will show in our other videos.