Props from Child to Parent Component (Hack)

Hello Everyone!
In this video, I show you a hack on how to pass props from your Child Component, to you parent component using React Hooks.
If you did like this video, please hit the Like and Subscribe button so I know to make more!
Twitter: / ania_kubow
KZbin: / aniakubow
Instagram: / aniakubow
#react #reacthooks

[@simba4572]

thank you I was about to literally disintegrate

[@aniakubow]

Hahaha no problem 😍

[@marksimpson4310]

I've watched a fair few programming tutorials. What's great about this is: Simple example to help us grasp the concept. Not too much technical jargon, so great for beginners like me. Concise. The video is only eight minutes long.

[@plumplumi]

thank you so much ! especially at the end where you explain which part is related to which in the code. That's the part I find most lacking in lots of coding videos.

[@christophelosiewicz5873]

Thanks a lot ! After viewing 50 videos, you are the only one who gives an answer simple ! (sorry for m'y english)

[@jomascarbProc]

you just saved my life with this video. I've been stuck in this problem for many hours

[@thomasadelaney5479]

Well done, Ania! Struggling to find EASY way to programatically pass props back to parent w/o user interaction. Your example gets me started. THX!

[@CanisLupusBG]

You rock. Now. In the year 2023 you will rule 'em all. Kudos, Ania.

[@biovawan]

Thank you! You can shorten the line 12 to "". Just passing the func's ref

[@Gallersatz]

I thought this too, but for some reason my project simply would not work unless I specifically typed word => like she did. Not sure of the reasoning, but on my project, Pretter put word into () and my Dracula theme formatted the font to look like props despite no props being declared (in Dracula, props turn into orange italics). I'd be interested to know why it works for some projects and not others.

[@francescociulla]

0:14 😂. Great video !

[@aniakubow]

hahaahahahaha! I had fun with that one

[@JamesQQuick]

@@aniakubow hahahah I laughed there too!

[@puruvijay6185]

Same 🤣🤣

[@utkarsh_katiyar]

Finally after so many videos on this topic, I finally found the one. Thanks

[@unitybr3222]

Kisses from Brazil, you saved my world!

[@jotasenator]

OMG, I pressed so hard the subscribe button after watching the video that I sent props to the parent myself. Nice ❤

[@w1pe0ut]

For all those young hackers out there. You can just put a setFunction of useState hook inside prop , call it in child component and it will affect value in a parent component. (:

[@BoBoO22595]

Genius! thanks!

[@Romeo-vt8hq]

your way doesn't work it throws an error : TypeError: prevDeps.join is not a function

[@Zaveram]

I was researchig about it, but I was understand. I watched this video, now my component works. Thank you so much!

[@avdheshyadav9796]

loved it. have been searching 2 hrs and finally got something staright to thte point

[@Aaron-sy5yx]

Love this one. Was able to implement in a project and saved the day

[@triedtested3236]

Hey Aaron was this a personal project or work project? 😊

[@gopinathkrm58]

The British accent + Teaching style is amazing

[@Tesudzi]

so true mate, and her big blue-grey eyes with that blond looks fantastic. So happy to find her.

[@arashkhaan4930]

i can't stop looking at her face when im trying to just underestand the concept, she's goddamn look amazing

[@BlockCylinder]

I've done this in the past, and I just did it again today. I have a reusable "Search" component which is an MUI text input with autocomplete. It takes the array of options and the label/placeholder string as props, and I want to pass the user-selected option back to the parent. I don't know if it's a hack, but it works well and it means I don't need to implement any global state management. It's also nearly identical to Angular @Output decorators which use event emitters to send data up from child to parent component.

[@VeredaProductions]

Thank you soooooooo much for the leson. You've solved all my problems with a magic trick. I'm still studying it to figure out how it is actually happening...

[@nicolaszambrano6076]

You saved me, I'm doing a technical test for a company and i solve my problem with this, Thank U !!!!

[@pascal5238]

Thank you so much for this video -- it helped me solve a problem for which I've spent hours trying without success, until I saw this :D

[@NewWorldGamingg]

so u basically pass setstate function as a prop from parent to child and with the help of this setState function u can make changes to the parent function

[@dollarmatian]

🙏🏽I LOOOOOOOVE hearing yuuuu say PASS... Aurally Magical! ✨

[@aniakubow]

Thank you for watching 🤩

[@gofigure1624]

Dope! Very useful. Just used this in an assignment in Bootcamp I’m attending thanks again.

[@szhzs6121]

you could also define the button in the parent and pass it down to the child. that's a better pattern in more complex scenarios, as it avoids passing props through multiple levels of child components (so called prop drilling). // Parent const changeTitleToMyName = setWord(process.env.REACT_APP_DEVELOPER_NAME) const button = return { ... {button} }

[@zym0tic428]

Thanks for this video! I was stuck for a few days pulling my hair out and this really helped!

[@anakinstone619]

Thank you! i'm learning React and i was trying to get something like emit from Vue to pass data to parent

[@musiclovers8488]

Thanks dear!! God bless you… And You bless us with your coding skills 🥰🥰… And one more thing you have really beautiful smile …. So keep smiling

[@hollyho6003]

This helped me understand props better! Thank you so much again for a great video

[@marcnadal8361]

Thank you so much, I almost changed the whole design of the page if I didn't saw this. You saved my life and time. ☺️

[@sunnyy6295]

About to use redux reducer selector etc. This helped me from all these.

[@cintron3d]

Nice tutorial! I Wouldn't really call this a hack - it's just how it's done. What you've shown here is actually much better than mutating the dom or a global variable which are what I'd consider to be hacks. By the way, arrow functions inside a render mean that your function will get re-created every render - which isn't optimal. For small apps it'll probably never have an impact on performance but still it's better practice to declare your functions as const outside of the render. Keep up the good work! I'm so glad you're here creating content that my sister and perhaps future daughters can look up to and learn from. 👍

[@npaul1440]

agreed. Waste of tine.. But good for those who still haven't thought of it.

[@arman3400]

Thank you for this, this was the video that helped me connect the dots. Subscribing now.

[@Sobieski526]

Thanks Ania! Super helpful to learn how to lift the state and pass between components

Thanks Ania, I solved a problem. Greetings from Argentina.

[@aksxmtvnty9]

"Cool", haha enjoyed this super simple hack, thanks alot.

[@aniakubow]

Thanks so much for watching!

[@aksxmtvnty9]

@@aniakubow I have just finished the 2048 game, your tutorial helped me alot. Let me host the game and share it with you 💖

[@simpletuts4945]

Legend...been trying for an hour!

[@idevbrandon]

Thank you, Ania. Made it so clear for understanding React

[@aniakubow]

you're very welcome! More react to come :D

[@ajayagrawal1090]

Even though I utilise Redux/RTK for state management among projects. But yes this trick is also being used constantly. Sometimes I don't even utilise them until and unless problem becomes bigger enough

[@kenilbhanderi8933]

Thank you ania for helping to solve my doubt it's very helpful Thank You very much.

[@nurammarnaufal7351]

ohh babe, this is what i looking for n the easiest turorial 🥺🥺. thanks alot

[@isaacdanieltordecillaferia4730]

I just looked at all your content, I am a fan of its potential in the area of programming and the ease with which you explain it, that's great. Greetings from Colombia :-D

[@aniakubow]

thanks so much!!!! Hello form London :)

[@ScottSpencePlease]

Love it! inb4 "well actually"!!! 😂

[@aniakubow]

haahah I'm SO still expecting a 'well I think you will find'

[@ThePixelitomedia]

ahhhhhh gorgeous Ania is back!

[@nxtalex10]

Thanks !!!!!!!!!!!!!!!!!!!!!!!!! I was losing my mind over this! Thanks thanks thanks thanks

[@aniakubow]

Any time !

[@redwan_lmati]

this was really helpful, thank you!!!

[@khaledmuhammed4225]

awsome ania you explantion is fantastic thanks alot

[@JamesQQuick]

I use this all the time! Great tip!!

[@raulcubila5877]

haha I saved your video cause I knew one day I'd need it. Thanks!!!

[@PandamoniumZA]

This just saved me! Thanks a ton!

[@JeremiahPeoples]

Does unidirectional data flow mean nothing to you 😂😂😂

[@MAT23154]

Ha! Exactly what I was looking for! Being new to react, I didn't figure out I could pass methods as props. This is very handy. Thank you! You explain very well and this video's rhythm is perfect.

[@milosz9668]

Love your videos!

[@notbarbara2647]

Solid video mate, cheers.

[@LilithinMerria]

Thank you so much for this. It helped a lot ^^

[@pazuzutru-truluv7094]

Thank you. I was tearing my hair out, which if you are as bald as I am you cannot do for long!

[@tusharyewale8645]

I think it is called as passing function through props or like props drilling. It works well but what if we have some grand childs or if we have more functions which we need to pass child, we need to pass through all the components inbetween which is un necessary. I think it will be better we use hooks or state management tool like redux

[@kishoreandra]

You are the one of few who looks straight at camera lens while recording and it's Great .... 😜

[@aniakubow]

Haha thanks for noticing! Sending love

[@kishoreandra]

@@aniakubow 🤝🤝is like a fan moment.... Ania(Barbie of js ) ...

[@CamVroM]

Ania, How can I pass multiple values ​​through the onchange() event in different "input text" from the child component to the parent component? Following the logic of passing setFunction through props? very thankful, Greetings teacher!

[@GuitarreroDaniel]

Amazing trick! Just tried it and works like a charm, thanks for sharing!

[@aniakubow]

Any time! Glad I could share something with you :)

[@FrankDase]

Is there a way to do the same without clicking a button or filling an input field? I call my change function within the return part and get the error: cannot update a component while rendering a different component

[@FrankDase]

I found the answer. I my component I have to use "useEffect".

[@vaibhavyadav8726]

Exactly what I was looking for.

[@aitor.online]

exactly what i needed. super helpful!

[@carlogustavovalenzuelazepe5774]

Could you do this but with inputs that change their value depending on the state like input type range, or something

[@codefinity]

0:12 🤓nerd impression! 😆👏

[@abdullah5ahmad]

this is simple but still a smart way to change parent state! thank you 😄

[@developerkim2042]

Thank you So Much I Love Your Code Wow~

[@holicneko1668]

I really like your accent! and the content. helful. thanks from Vietnam

[@metamedian]

Wow, thank you for this hack!

[@advitiyachouhan5898]

TNice tutorials is going in my helpful tutorials playlist.

[@ArshdeepSingh-rs6jn]

What a great video. Very concise and straight to the point

[@jongartv5726]

thank you, very good video

[@MrArthurRibeiro]

Great vídeo!!! Best teacher!!!

[@andraddedan]

Thank you so much, very thanks for this video!

[@vakasghulamnabi9259]

I am still learning react. Your Video just made my world a lot easy

[@connorvannostrand5764]

How do you pass a Function as a prop but also other props as well? My child component has other props that I need to yse

[@bissen]

Just what I needed! I now just have one challenge... I need to click twice for state to actually update (I'm changing the background color with an onClick). Why is this?

[@Sinnermane]

I LOVE your tutorial, thank you so much for teaching me this one!

[@filip23128]

Thanks Ania!

[@LemaTechMedia]

What a great way of changing state inside the parent component! 😁

[@joshuacushing2858]

Super helpful and understandable. Thank you!

[@omegart2207]

i love when you say wherever =)

[@aniakubow]

Thanks for watching ‘wherever’ you are 😛

[@omegart2207]

tnks sooo much much much =D jaja

[@umerkhalique9088]

any way to do this without hooks? i havent learnt hooks yet. also, i saw on another tutorial that you need to make it a class component first which is counterintuitive in istelf as one might want to make it a functional component to follow modern convention.

[@beni_swtr]

Yes new Video

[@aniakubow]

yeaaa! Hope you like it

[@beni_swtr]

Yes i have

[@baikovamaria5725]

thanks for the video. isn't that called lifting state up?

[@luizuk4]

amazing content, saves me! a big thanks from brazil!

[@aniakubow]

Thanks for watching!!

[@RobsonAlvesJJ]

Thank you Ania very good.

[@sumitmehra5119]

Thanks for saving my job.

[@ericxls93]

Dudes I love your videos -thank you, but can not see one that covers react for beginners, I’m I missing something?

[@zkcoding1132]

more video on props and react in general please.

[@bennyhilding2850]

Hey! Just tried this and it works perfectly. Thank you!!

[@mikez5980]

Thank you for help. Easy way to solve my issue :)

[@muzafferckay2609]

Hi, can you cover a tutorial to give answer to this question: should be used constructor function, class or factory function?

[@chukwuebukaanyanwu5433]

Thank you!! You are amazing!

[@nikdev8023]

Hi from Ukraine 👋 I really like your videos! Thank you!)

[@aniakubow]

greetings from London!

[@IAMpHAM18]

Wow just like that! Thanks!

[@genevievenavales2851]

Thank you so much for this!

[@ibraheemhaseeb3660]

omg, that was amazing

[@nicolasdupere]

Wonderful! Thanks