Passing Props From Child to Parent Component in React.js

Passing Props From Child to Parent Component in React.js

TomDoesTech

2 года назад

75,100 Просмотров

Is it possible to pass props from a child component to a parent component in React.js? Technically, no. By watching this video you will learn two methods that will help you solve the problems that you were hoping to solve by passing props from children to parents components.

The first method is to simply pass a function to the child component that allows you to set a value in the parent component.

The second method is to return an object from the child component, allowing you to pass down its properties and render function to the parent component. Remember, React.js components are simply functions and with the factory function design pattern, you can return objects from your components. The returned object can contain a render method and the second is the props that you want to pass from the child to the parents component.

🌎 Follow me here:
Discord: https://discord.gg/4ae2Esm6P7
Twitter: https://twitter.com/tomdoes_tech
Facebook: https://www.facebook.com/tomdoestech​
Instagram: https://www.instagram.com/tomdoestech​
TikTok: https://www.tiktok.com/@tomdoes_tech
☕ Buy me a coffee: https://www.buymeacoffee.com/tomn

Тэги:

#react #props_from_child_to_parent #reactjs #react_tutorial #developer_youtube #javascript_tutorial #reactjs.org #props #free_javascript_online #free_react_lessons_online #web_development #free_react_developer_lesson #components #hooks #react_hooks #react_hooks_props_from_child_to_parent #react_teacher_online #child_component #pass_data #parent_component #child_to_parent
Ссылки и html тэги не поддерживаются


Комментарии:

TomDoesTech
TomDoesTech - 09.08.2021 03:49

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.

Ответить
Ken Taylor
Ken Taylor - 22.09.2023 12:39

Wow

Ответить
Cosiocosh
Cosiocosh - 15.09.2023 22:46

Wow, that is amazing

Ответить
Azure Harris
Azure Harris - 12.09.2023 00:19

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

Ответить
sayam ajmal
sayam ajmal - 05.07.2023 17:01

Subbed

Ответить
Agit Naeta
Agit Naeta - 13.06.2023 13:16

Explain a lot, clear and short wonderful

Ответить
Owais Qasim
Owais Qasim - 17.05.2023 15:00

Didn't understand shit.

Ответить
Kushal Nagwanshi
Kushal Nagwanshi - 07.05.2023 20:38

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 <Component /> from render. Or maybe you meant to call this function rather than return it.

any chance of this method being not correct ?

Ответить
Adrien Nobel Mbougue
Adrien Nobel Mbougue - 29.04.2023 13:28

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.

Ответить
Tuấn Đinh Công
Tuấn Đinh Công - 27.04.2023 19:52

perfect

Ответить
Selva Ganesh M
Selva Ganesh M - 19.04.2023 19:57

best video. Really helpful Tom 👍

Ответить
Hermes Santos
Hermes Santos - 21.03.2023 19:40

thank you, dude

Ответить
Jonathon
Jonathon - 17.03.2023 04:46

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

Ответить
Himanshu Shekhar Sahoo
Himanshu Shekhar Sahoo - 10.02.2023 08:24

really nice explanation

Ответить
Tudor Alexandru Ienulescu
Tudor Alexandru Ienulescu - 09.02.2023 22:13

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!

Ответить
Le Phenix
Le Phenix - 09.02.2023 12:07

Exactly what I needed for my React component npm library!

Ответить
Как я #DoSmth?
Как я #DoSmth? - 03.02.2023 16:37

So helpful!

Ответить
Kevin Quinn
Kevin Quinn - 02.02.2023 16:21

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

Ответить
Obas-plays
Obas-plays - 27.01.2023 13:16

voice output is too low

Ответить
A X L
A X L - 24.01.2023 07:36

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

Ответить