Props from Child to Parent Component (Hack)

  Рет қаралды 119,023

Code with Ania Kubów

Code with Ania Kubów

3 жыл бұрын

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
KZfaq: / aniakubow
Instagram: / aniakubow
#react #reacthooks

Пікірлер: 293
@simba4572
@simba4572 3 жыл бұрын
thank you I was about to literally disintegrate
@aniakubow
@aniakubow 3 жыл бұрын
Hahaha no problem 😍
@thomasadelaney5479
@thomasadelaney5479 2 жыл бұрын
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!
@hollyho6003
@hollyho6003 3 жыл бұрын
This helped me understand props better! Thank you so much again for a great video
@Sobieski526
@Sobieski526 2 жыл бұрын
Thanks Ania! Super helpful to learn how to lift the state and pass between components
@marksimpson4310
@marksimpson4310 3 жыл бұрын
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
@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.
@pascal5238
@pascal5238 3 жыл бұрын
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
@utkarsh_katiyar
@utkarsh_katiyar 2 жыл бұрын
Finally after so many videos on this topic, I finally found the one. Thanks
@Aaron-sy5yx
@Aaron-sy5yx 2 жыл бұрын
Love this one. Was able to implement in a project and saved the day
@triedtested3236
@triedtested3236 2 жыл бұрын
Hey Aaron was this a personal project or work project? 😊
@marcnadal8361
@marcnadal8361 2 жыл бұрын
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. ☺️
@Sinnermane
@Sinnermane 2 жыл бұрын
I LOVE your tutorial, thank you so much for teaching me this one!
@christophelosiewicz5873
@christophelosiewicz5873 4 ай бұрын
Thanks a lot ! After viewing 50 videos, you are the only one who gives an answer simple ! (sorry for m'y english)
@idevbrandon
@idevbrandon 3 жыл бұрын
Thank you, Ania. Made it so clear for understanding React
@aniakubow
@aniakubow 3 жыл бұрын
you're very welcome! More react to come :D
@Zaveram
@Zaveram Жыл бұрын
I was researchig about it, but I was understand. I watched this video, now my component works. Thank you so much!
@JamesQQuick
@JamesQQuick 3 жыл бұрын
I use this all the time! Great tip!!
@MAT23154
@MAT23154 2 жыл бұрын
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.
@aitor.online
@aitor.online 3 жыл бұрын
exactly what i needed. super helpful!
@GuitarreroDaniel
@GuitarreroDaniel 3 жыл бұрын
Amazing trick! Just tried it and works like a charm, thanks for sharing!
@aniakubow
@aniakubow 3 жыл бұрын
Any time! Glad I could share something with you :)
@ArshdeepSingh-rs6jn
@ArshdeepSingh-rs6jn Жыл бұрын
What a great video. Very concise and straight to the point
@gofigure1624
@gofigure1624 2 жыл бұрын
Dope! Very useful. Just used this in an assignment in Bootcamp I’m attending thanks again.
@avdheshyadav9796
@avdheshyadav9796 2 жыл бұрын
loved it. have been searching 2 hrs and finally got something staright to thte point
@jomascarbalProc
@jomascarbalProc Жыл бұрын
you just saved my life with this video. I've been stuck in this problem for many hours
@zym0tic428
@zym0tic428 Жыл бұрын
Thanks for this video! I was stuck for a few days pulling my hair out and this really helped!
@redwan_lmati
@redwan_lmati 2 жыл бұрын
this was really helpful, thank you!!!
@joshuacushing2858
@joshuacushing2858 2 жыл бұрын
Super helpful and understandable. Thank you!
@isaacdanieltordecillaferia4730
@isaacdanieltordecillaferia4730 3 жыл бұрын
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
@aniakubow 3 жыл бұрын
thanks so much!!!! Hello form London :)
@kenilbhanderi8933
@kenilbhanderi8933 2 жыл бұрын
Thank you ania for helping to solve my doubt it's very helpful Thank You very much.
@PandamoniumZA
@PandamoniumZA 2 жыл бұрын
This just saved me! Thanks a ton!
@bennyhilding2850
@bennyhilding2850 3 жыл бұрын
Hey! Just tried this and it works perfectly. Thank you!!
@LemaTechMedia
@LemaTechMedia 3 жыл бұрын
What a great way of changing state inside the parent component! 😁
@LilithinMerria
@LilithinMerria 2 жыл бұрын
Thank you so much for this. It helped a lot ^^
@abdullah5ahmad
@abdullah5ahmad 2 жыл бұрын
this is simple but still a smart way to change parent state! thank you 😄
@nicolaszambrano6076
@nicolaszambrano6076 3 жыл бұрын
You saved me, I'm doing a technical test for a company and i solve my problem with this, Thank U !!!!
@raulcubila5877
@raulcubila5877 3 жыл бұрын
haha I saved your video cause I knew one day I'd need it. Thanks!!!
@milosz9668
@milosz9668 Жыл бұрын
Love your videos!
@andraddedan
@andraddedan 2 жыл бұрын
Thank you so much, very thanks for this video!
@CanisLupusBG
@CanisLupusBG 3 жыл бұрын
You rock. Now. In the year 2023 you will rule 'em all. Kudos, Ania.
@VladimirDevyatoff
@VladimirDevyatoff 2 жыл бұрын
A great tutorial! Thank you a lot.
@ThePixelitomedia
@ThePixelitomedia 3 жыл бұрын
ahhhhhh gorgeous Ania is back!
@khaledmuhammed4225
@khaledmuhammed4225 11 ай бұрын
awsome ania you explantion is fantastic thanks alot
@vaibhavyadav8726
@vaibhavyadav8726 3 жыл бұрын
Exactly what I was looking for.
@jotasenator
@jotasenator Жыл бұрын
OMG, I pressed so hard the subscribe button after watching the video that I sent props to the parent myself. Nice ❤
@simpletuts4945
@simpletuts4945 2 жыл бұрын
Legend...been trying for an hour!
@genesistabuena1563
@genesistabuena1563 3 жыл бұрын
VERY HELPFUL! Thanks a lot :)
@nurammarnaufal7351
@nurammarnaufal7351 Жыл бұрын
ohh babe, this is what i looking for n the easiest turorial 🥺🥺. thanks alot
@arman3400
@arman3400 2 жыл бұрын
Thank you for this, this was the video that helped me connect the dots. Subscribing now.
@dollarmatian
@dollarmatian 3 жыл бұрын
🙏🏽I LOOOOOOOVE hearing yuuuu say PASS... Aurally Magical! ✨
@aniakubow
@aniakubow 3 жыл бұрын
Thank you for watching 🤩
@chukwuebukaanyanwu5433
@chukwuebukaanyanwu5433 3 жыл бұрын
Thank you!! You are amazing!
@VeredaProductions
@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...
@genevievenavales2851
@genevievenavales2851 2 жыл бұрын
Thank you so much for this!
@metamedian
@metamedian 2 жыл бұрын
Wow, thank you for this hack!
@notbarbara2647
@notbarbara2647 2 жыл бұрын
Solid video mate, cheers.
@anakinstone619
@anakinstone619 2 жыл бұрын
Thank you! i'm learning React and i was trying to get something like emit from Vue to pass data to parent
@francescociulla
@francescociulla 3 жыл бұрын
0:14 😂. Great video !
@aniakubow
@aniakubow 3 жыл бұрын
hahaahahahaha! I had fun with that one
@JamesQQuick
@JamesQQuick 3 жыл бұрын
@@aniakubow hahahah I laughed there too!
@puruvijay6185
@puruvijay6185 3 жыл бұрын
Same 🤣🤣
@piotrkrupa9032
@piotrkrupa9032 Жыл бұрын
W końcu zrozumiałem. Dziękuję
@IAMpHAM18
@IAMpHAM18 3 жыл бұрын
Wow just like that! Thanks!
@RobsonAlvesJJ
@RobsonAlvesJJ 2 жыл бұрын
Thank you Ania very good.
@abdullah5ahmad
@abdullah5ahmad 2 жыл бұрын
wow this is amazing thank you !
@prateekmitra9702
@prateekmitra9702 3 жыл бұрын
Cool video! Really helpful.
@musiclovers8488
@musiclovers8488 2 жыл бұрын
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
@ahmedalanazi2021
@ahmedalanazi2021 2 жыл бұрын
Well explained! You saved my 8 days hahahha Thank you.
@mikez5980
@mikez5980 2 ай бұрын
Thank you for help. Easy way to solve my issue :)
@nicolasdupere
@nicolasdupere Жыл бұрын
Wonderful! Thanks
@sunnyy6295
@sunnyy6295 2 жыл бұрын
About to use redux reducer selector etc. This helped me from all these.
@szhzs6121
@szhzs6121 2 жыл бұрын
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} }
@gopinathkrm58
@gopinathkrm58 3 жыл бұрын
The British accent + Teaching style is amazing
@Tesudzi
@Tesudzi 3 жыл бұрын
so true mate, and her big blue-grey eyes with that blond looks fantastic. So happy to find her.
@developerkim2042
@developerkim2042 2 жыл бұрын
Thank you So Much I Love Your Code Wow~
@alienperspective8091
@alienperspective8091 3 жыл бұрын
beautiful tutorial , thank you
@arashkhaan4930
@arashkhaan4930 Жыл бұрын
i can't stop looking at her face when im trying to just underestand the concept, she's goddamn look amazing
@aksxmtvnty9
@aksxmtvnty9 3 жыл бұрын
"Cool", haha enjoyed this super simple hack, thanks alot.
@aniakubow
@aniakubow 3 жыл бұрын
Thanks so much for watching!
@aksxmtvnty9
@aksxmtvnty9 3 жыл бұрын
@@aniakubow I have just finished the 2048 game, your tutorial helped me alot. Let me host the game and share it with you 💖
@filip23128
@filip23128 2 жыл бұрын
Thanks Ania!
@ibraheemhaseeb3660
@ibraheemhaseeb3660 2 жыл бұрын
omg, that was amazing
@luizuk4
@luizuk4 2 жыл бұрын
amazing content, saves me! a big thanks from brazil!
@aniakubow
@aniakubow 2 жыл бұрын
Thanks for watching!!
@vakasghulamnabi9259
@vakasghulamnabi9259 3 жыл бұрын
I am still learning react. Your Video just made my world a lot easy
@deepalakshmip5520
@deepalakshmip5520 2 жыл бұрын
Thank you mam..... It helps me a lot at right time.
@jongartv5726
@jongartv5726 2 жыл бұрын
thank you, very good video
2 жыл бұрын
Thanks Ania, I solved a problem. Greetings from Argentina.
@cintron3d
@cintron3d 3 жыл бұрын
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
@npaul1440 2 жыл бұрын
agreed. Waste of tine.. But good for those who still haven't thought of it.
@ScottSpencePlease
@ScottSpencePlease 3 жыл бұрын
Love it! inb4 "well actually"!!! 😂
@aniakubow
@aniakubow 3 жыл бұрын
haahah I'm SO still expecting a 'well I think you will find'
@salvadoremmanuelkain
@salvadoremmanuelkain 3 жыл бұрын
very useful just what I need, Thanks
@aniakubow
@aniakubow 3 жыл бұрын
I’m glad I could help 😊
@unitybr3222
@unitybr3222 2 жыл бұрын
Kisses from Brazil, you saved my world!
@thibaultboutaud5216
@thibaultboutaud5216 Жыл бұрын
Awesome !
@hippiestafarii
@hippiestafarii 3 жыл бұрын
Yes it was useful and tks for sharing :-)
@MrArthurRibeiro
@MrArthurRibeiro Жыл бұрын
Great vídeo!!! Best teacher!!!
@afkpavi
@afkpavi 3 жыл бұрын
Great one. keep it coming
@aniakubow
@aniakubow 3 жыл бұрын
thank you for the support!
@BlockCylinder
@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.
@flyflor599
@flyflor599 Жыл бұрын
Thanks Ania
@augustomandelli9834
@augustomandelli9834 2 жыл бұрын
Saved my day
@WrestlingTournamentsDotCom
@WrestlingTournamentsDotCom 2 жыл бұрын
Thanks!
@manupareek8776
@manupareek8776 2 жыл бұрын
Thanks mam it helped very much 👍👍
@ajayagrawal1090
@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
@holicneko1668
@holicneko1668 3 жыл бұрын
I really like your accent! and the content. helful. thanks from Vietnam
@biovawan
@biovawan 2 жыл бұрын
Thank you! You can shorten the line 12 to "". Just passing the func's ref
@Gallersatz
@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.
@bigjamar
@bigjamar 7 ай бұрын
excelente.. muchas gracias !
@camilocanales3620
@camilocanales3620 3 жыл бұрын
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!
@sumitmehra5119
@sumitmehra5119 2 жыл бұрын
Thanks for saving my job.
@tusharyewale8645
@tusharyewale8645 2 жыл бұрын
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
@abhishekjn3390
@abhishekjn3390 2 жыл бұрын
ty ania 👌
@aliibrahimcakir3280
@aliibrahimcakir3280 2 жыл бұрын
I love youuuuu :) thanksssss
@filipzafran7979
@filipzafran7979 3 жыл бұрын
fun(ky), yet educational. good job! :)
@filipzafran7979
@filipzafran7979 3 жыл бұрын
really cool topic BTW!
@aniakubow
@aniakubow 3 жыл бұрын
Thanks for watching! :) I really apprecaite it!
React JS Props and Prop Drilling | Learn ReactJS
25:54
Dave Gray
Рет қаралды 31 М.
10 React Antipatterns to Avoid - Code This, Not That!
8:55
Fireship
Рет қаралды 716 М.
Balloon Stepping Challenge: Barry Policeman Vs  Herobrine and His Friends
00:28
We Got Expelled From Scholl After This...
00:10
Jojo Sim
Рет қаралды 48 МЛН
Learn how to use Props in React in 19 minutes (for beginners)
19:12
Sonny Sangha
Рет қаралды 144 М.
Change parent state from child components in React/NextJS
10:30
Digital CEO
Рет қаралды 6 М.
Beginner React.js Coding Interview (ft. Clément Mihailescu)
36:31
Ben Awad
Рет қаралды 2,1 МЛН
React tutorial in Hindi #38 Send Data Child to Parent Component
9:24
Code Step By Step
Рет қаралды 75 М.
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 454 М.
Passing Data from Child to Parent Components in React
12:01
KnowledgeKeen
Рет қаралды 7 М.
React Props are Easy
18:05
Sam Meech-Ward
Рет қаралды 7 М.
6 State Mistakes Every Junior React Developer Makes
15:53
Lama Dev
Рет қаралды 263 М.
Balloon Stepping Challenge: Barry Policeman Vs  Herobrine and His Friends
00:28