Passing Props From Child to Parent Component in React.js

[@TomDoesTech]

If you use this. method and are having trouble testing, you need to render out your component and then pass that function into the render method. If anyone is struggling I can make a video explaining how to test these component correctly.

[@johnbeckham606]

Would be awesome 😎

[@fonzie007007]

Can I pass a component inside render? return {render:()} Currently its returning an empty div

[@TomDoesTech]

@@fonzie007007 Your render function will need to return that component. I don't know your use-case but I suspect there is probably an easier way of doing it.

[@LebaneseNostalgia]

would be really nice if you can explain why we should be using render in this case? Thanks for the video

[@shaikhzaki3358]

This is like custom hook I think

[@adriennobel]

Just when I was about to give up, I stumbled on this video. Thank you so much. You explained EXACTLY what I sas looking for.

[@alextana746]

this is by far the best video on the subject with the best implementation

[@TomDoesTech]

Thank you :)

[@brikka]

Agreed!

[@Hello_VVolf]

More than 2 hours searching, this is the literally I was looking for. Thanks a lot

[@TomDoesTech]

Glad I could help!

[@KalSt]

This is just awesome. Short, precise, clear. Liked and suscribed.

[@TomDoesTech]

Welcome aboard!

[@rtc9]

Tom, I just want to give you a heartfelt thanks for this fantastic video.

[@johnbeckham606]

Awesome, didn't know about the useFilters method ❤️

[@NightlyNewsChat]

This is an amazing video, learned things I need to know and found out things I need to learn more about.

[@AgitNaeta]

Explain a lot, clear and short wonderful

[@holyfreakinguacamole]

Thanks to you I can sleep more soundly this evening. (I've been at a roadblock on my bootcamp capstone app for two days!!)

[@TomDoesTech]

Rest up buddy!

[@LePhenixGD]

Exactly what I needed for my React component npm library!

[@kevinquinn1918]

Thanks. This is exactly what I was looking for. This will make my code much simpler

[@himanshushekharsahoo6656]

really nice explanation

[@selvaganeshm1914]

best video. Really helpful Tom 👍

[@merthaddad1512]

That was a smart one! thanks a lot

[@netsaosa4973]

thanks Tom

[@BrightAnyawe]

I was exhausted and wanted to break off, but your video has saved me a lot of time. But have question here for you. ->Can you explain why you use the useFilter for the component Thanks alot☺☺

[@5erd1]

if i made this into a separate component, is there a way that i can pass data into the useFilters function? I am using the second method to make a drop down menu which the list of it should be generated dynamically. so i need to pass the list data into the function and return the selected item, is this the way to do it or am i overcomplicating it

[@evanvarozza7714]

Having this same question.

[@hermessantos181]

thank you, dude

[@taoaleixandre2089]

life savior bro

[@tylertyler965]

smart! lesson learned

[@tranquangang9420]

Thank you so much! Very helpful!

[@TomDoesTech]

Glad it was helpful!

[@AleksandrNeo]

So helpful!

[@medusa121]

Wow, that is amazing

[@tudoralexandruienulescu2214]

Glad to see others got it. This was not clear to me. :( For beginners like me you should 1: Give a better overlook of all your code at the beginning of the demo; 2: Your explanation deserved a slower pace or maybe a better use case. All the best!

[@TomDoesTech]

There's no way i could aim this at absolute beginners. You'd need to have some understanding of React to understand what problem this even solves

[@HaiderAli-oi5fm]

@3:00 I don't get it. We can change the state by setting the state. But in the case of search, greaterThan, lessThan you are just simply returning these variables and accessing them from other components. You are changing their values without setting a state. Can you explain it to me?

[@TomDoesTech]

Their state is being set in the filters component, then filters returns the values.

[@HaiderAli-oi5fm]

@@TomDoesTech Thanks

[@Emmabartoillustration]

hmm... It seems like in the second method you just made something some people call "custom hook"🤔 correct me if I get it wrong. Anyway, great explanation! Thanks a lot!!!

[@TomDoesTech]

That is correct

[@dr_davinci]

This works but gives this warning in the console : 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. any chance of this method being not correct ?

[@TomDoesTech]

Make sure you're executing the function and returning JSX

[@dr_davinci]

@@TomDoesTech I had a separate file for useComponent , that was not named correctly, naming it useComponent fixed the warning. Though it was still not working as expected , so I just ended up moving the state up to parent component. Thanks for the reply though.

[@TomDoesTech]

@@dr_davinci Yeah, if you can move the state to the parent, that's usually going to be the simplest and best approach. This is just a good trick for when you get stuck

[@PlayingCode]

what to do when I have input tag as a child component and I want to fetch the value of the input tag from the parent component...there are many child component refrenced in the parent component

[@TomDoesTech]

Throw your hands up and pray to a higher being. Joking, this probably isn't the pattern you want to use for that.

[@AzNWizzy]

Thank you Tom!

[@yolobuggy]

Hey with method 2 if my child component is a choice Selection component, I set it up like you showed so that it will return the current choice that is being selected. Now, what if I want to render the choice list component multiple time, but with different props each time. The way you showed, it only calls the child component once, so if you render it multiple times its just rendering the exact same component multiple times. How would you go about rendering the child multiple times with different props each time?

[@kalinduR96]

custom hook♥️

[@FF-ie6sd]

is it a good practice to pass Hooks as props?

[@aat501]

from my understanding, you would do this if two different areas of your application need access to the same set of information. check out this tree for example (hopefully gets formatted right) root / \ cars body of water / \ / \ \ capacity(ppl) color pools lakes oceans / color say that in this weird example the car has to be the same color as the pool and have the shared need to access some state related to color. since they dont have the same parents, passing down that state would be a bit of a hassle. to get around this, they can both tap into a hook at their respective point in the tree. this means we can bypass the creation of some component housing the 'color-state' as some ancestor to both nodes of cars and pools. meaning less nodes have to pass down this state information as props for their children way down the tree to use.

[@FF-ie6sd]

@@aat501 Thank you so much! This really helped. Another side question, this feels a lot like redux. Do these two methods have some kind of similar concepts when we try to use same piece of data?

[@alvaroaquije2572]

Just amazing

[@azureharris8647]

Im confused as to how you would render this in the App.js

[@TomDoesTech]

Didn't I show how to render it in the video?

[@arsh_10x]

write that code in separate file and then call that file in App.js isn't it simple!!

[@John223]

what if the child component takes props? how would you pass the props from the parent if all you do is {render}?

[@TomDoesTech]

Pretty sure you can do something like {() => render(myProps)}

[@John223]

I tried that and it gives me the 'myProps' is not defined error {() => render( iName='username' iText='test' )}

[@TomDoesTech]

@@John223 Use an object? That's not even valid JS?

[@TomDoesTech]

@@John223 Here's an example of how to do it: codesandbox.io/s/dark-star-0vyoep?file=/src/App.js

[@rahulmakwana663]

This is what iwas looking you saved my hours

[@khestal]

From the beginning I'm confused, I have not found a consistent answer to why an object is a parent and why another object is a child. In this video, for example, they are just named parent and child, why? why not, I guess.

[@TomDoesTech]

A parent component is responsible for rendering its children. If a compone is rendered from another component, the component that renders it is considered it's parent.

[@codewithhaider7190]

how to pss the data from child to parent if the click button in parent Plz give me answer

[@KCrossReal]

Make the child a custom hook, then you can access the child data in the parent. const Parent = () => { const { dataFromChild } = useChild(); return ( dataFromChild() } > Access Child ); }

[@dylexbenji]

dope 👍🏼

[@Momosun2018]

@1:28 "pass the props down from the child to the parent" confused me for a second.

[@edtechbymeera]

I thought its only possible to pass props from parents to child. is it possible vice-versa?

[@TomDoesTech]

If you watch the video you'll find out

[@williamjames6854]

feedback : audio is so so low brother, make it louder by your mike aur like by the help of software. I am not able to hear anything in my all device without earphone

[@TomDoesTech]

Thanks for the feedback. I've listened to it back on several devices and the audio is fine.

[@rootriger912]

nicely explained. thanks

[@imrsuv]

perfect

[@saadbelghiti8150]

ty bro

[@TomDoesTech]

yw bro

[@sayamajmal8094]

Subbed

[@obas-plays6059]

voice output is too low

[@KendaBeatMaker]

Wow

[@tipfertilizer4595]

Your video is very silent

[@juhandvan]

cool :vv

[@rajkumar-nq2te]

Great

[@programmer6953]

i did not understand anything from that video as a beginner ,im disappointed

[@TomDoesTech]

This video isn't for beginners

[@programmer6953]

@@TomDoesTech thanks for answer though,i think ill nevet be able to understand the react,the only job i could find is react and i suck at it so..

[@yasinduneth]

@@programmer6953 as a beginner if you tried this, you're fcked!

[@reni_christian]

Jotai is easy to use instead of this