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?)
Hellozzz, Check this video, this videos does have parent child data passing. th-cam.com/video/iCnAn45XL6A/w-d-xo.html And the easiest way to use the values post uplifting is save the same in local usestate variable. And thanks for the comment ☺️
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.
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
Hey @padmamuralikrishna1869 , I have shown here how to pass data from Parent to Child ( th-cam.com/video/GVkYFFqQPtA/w-d-xo.html ) 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.
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 🙂
@@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!!
Explained very well, Thanks
Thank you so much 😊
Thank You Sir!! Was Stuck Hard Since Last 2 hrs And Then Found This Video
Happy that it helped you 😊
Thankyou so much for clear explanation..
I am glad @Tejaswini you liked it. ☺️
Great knowledge
Thank you @manoj. I am glad you liked it 😊
best video .. keep up the good work
I am glad you liked it 😊
great
Thank you Bharat
ur the man. exactly what i was lookin for
Thank you ☺️, I am glad you liked it.
Please subscribe and share
so useful thanks a lot
Glad it was helpful @Batool ☺️
Great work... Can use this way with react-query
Hey absolutely, react query is quite easy to use with this way too 😉
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?)
Hellozzz,
Check this video, this videos does have parent child data passing.
th-cam.com/video/iCnAn45XL6A/w-d-xo.html
And the easiest way to use the values post uplifting is save the same in local usestate variable.
And thanks for the comment ☺️
great tutorial , are you gonna make more videos?
Your wish is my command, a video is just uploaded and live 😉
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.
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
@@KnowledgeKeen Thanks for the help
@@MIXKNOWLEDGEbylohith You are welcome :)
Can you make a video on passing similar props from parent to grandchild
Hey @padmamuralikrishna1869 ,
I have shown here how to pass data from Parent to Child ( th-cam.com/video/GVkYFFqQPtA/w-d-xo.html ) 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.
It is lifting state up
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 🙂
@@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!!
@shaimeur actually it is 😊.
The only way to lift the state is using a call back in this case.