Child to Parent || Parent to child || Props || React COMPONENTS || Next Js Tutorial
Child to Parent || Parent to child || Props || React COMPONENTS || Next Js Tutorial
From a react Component def. to sending data/props from parent to child and child to parent.
Hey Logical People, in this Next.js tutorial video, we will take a deep dive into React/NEXTJS component. We will talk about reusability, standalone UI, props.
How to send data from parent to child component.
How to sent data from child to parent component and much more.
These concepts will make you project ready and enables you with tools required to work in a multinational company.
#campusToCorporate #getHired #computerScience
0:00 Hello Logical People
0:23 Learning Objectives
1:00 Components
4:44 Component reusability
7:10 Props (Parent to Child)
16:19 Props (Child to Parent)
23:14 Recap
25:01 Bonus (tips and tricks)
NEXTJS: https://nextjs.org/docs/getting-started
NODE JS: https://nodejs.org/en/
VS CODE: https://code.visualstudio.com/
Content
4 -> Hi Logical People GKV here.
In the last video we talked
8.48 -> about 'useRef' hook and with that
video we completed our hooks concept.
14.56 -> In this video we will learn about everything that
is there to learn about components. So let's just
20.88 -> do it. So the learning objective for this video
are these four. We will learn what are components?
29.68 -> Then we will learn how to design independent
UIs using component? Then you will also learn
36.56 -> how to reuse components and at the end we are
going to talk about props and then specifically
44.16 -> parent to child prop and child to parent prop.
49.44 -> okay let's get started.
54.32 -> So what are components? As always
we will go to google and look for
58.72 -> what are components. Let's
have a look, I'm back to my
63.68 -> chrome browser. I'm gonna open google and I'm
gonna search for components. In react components
73.2 -> let you split the UI into independent reusable
pieces and think about each piece in isolation.
84.24 -> I think this is really nice
explanation what a component mean
89.44 -> and from my point of view what it means
is that you can actually create different
95.52 -> sections of your component into different pieces
and then you can reuse them as and when required.
104.16 -> Brilliant.
Now let's jump
106.16 -> back to our VSCode and let's get our hands dirty.
Okay to get started for components what I'm gonna
113.04 -> do is I'm gonna create a new folder called
components. Because you know it makes sense
118.8 -> to put all your components into one
place. So in your root directory
125.44 -> just right click and say new folder
and just call it compo and like that
134.24 -> inside components I'm gonna create a new
file and I'm gonna call it 'dominos.tsx'
147.36 -> the reason we are calling we are
157.04 -> the reason I created a domino's component is
because we're gonna build a very simple domino's
163.44 -> pizza outlet okay. So before we jump into that
I just want to quickly highlight one thing. So
170.56 -> if I go to pages and I go to index.tsx what you
see on the screen is actually a component. So you
179.36 -> have been working with components all the time.
You just did not know that it's called component.
186.08 -> Umm with that knowledge let's go back to
our domino's pizza and let's let's put a
192.56 -> quick comment so this is domino's knows
if I can spell it dominos is a outlet.
205.12 -> In our outlet
210.56 -> we only either bake a pizza
216.64 -> or we sell the pizza. That's all we
do. We don't we don't take orders,
222.08 -> we don't take payments, nothing
we just bake pizza and sell pizza.
228.08 -> So let's write our very first
component I'm gonna call it const
234 -> Dominos equals to
238 -> return
243.52 -> in maybe in h3 I i am from
249.68 -> it's a place this is the outlet and
I'm gonna give it a name I'll say
259.36 -> logical pizza outlet. You know because
why not and let's export this because
267.2 -> of course x react needs to know that how to
find this export default dominos beautiful
276.64 -> now how do we use this component it's very
simple I'll go to index page for example here
283.04 -> just the way we use html tags we're going to use
components I'm going to say dominos and hopefully
293.12 -> and hopefully VSCode will figure out where
this component is? So I'm going to click on it.
300.88 -> I want to save it. In case VSCode is not able to
find your dominos pizza you're going to import it
308.16 -> like this okay? So let's go back to our
localhost and see what's happening. So it
315.84 -> says hello world and it says hi I'm from logical
pizza outlet. Nice. So if if we quickly go back
325.6 -> to our to our learning objectives, we see we
wanted to learn what are what are components.
331.52 -> So we just learned that. This reusable
piece of code right with its separate UI
339.04 -> now there's another learning concept that we want
to cover which is, components for independent UI.
345.2 -> What this means is, if I go back here and
if I go to dominos and I say you know what
353.52 -> since we are not using any fancy styling I'm
just going to use inline style. I'll say sorry
363.92 -> background as red. If we go back to our browser
you'll see that this component got the background
373.04 -> as red and that's that's fundamentally about it.
Right? That's what component for independent UI
379.84 -> means, you can actually go and put whatever you
like in your component and that UI or that style
388.08 -> or that look and feel will never be shared with
anyone else it's only and only for that component.
398.24 -> The third thing that we wanted to learn about
components is about its usability reusability
405.12 -> and what that means is that now since i've created
this component, I can actually go here and maybe
412.64 -> create another component, maybe another component,
like that. If you were domino pizza you would
420.48 -> probably do franchisees and this is basically
your franchises. And all of them are identical,
425.6 -> and that's the beautiful part of component, that
you can reuse the same thing again and again.
432.96 -> Perfect. I like it where it's going, the last
learning objective was to learn about props.
441.84 -> Okay, first let's let's think
about what is what is props?
446.4 -> So I'm going to remove all
those I come back to dominos.
450.16 -> What
452.88 -> props basically means basically means is
459.28 -> 'arguments' or 'parameters' to a function.
Means. 'props' are just fancy way of saying
473.2 -> 'parameters' or 'arguments' to a function.
Now if you remember from one of our earlier
477.68 -> videos, that this part whatever highlighted
just now, is actually an anonymous function
483.84 -> right? So this is a function that has no name
but is being referred by this constant variable.
490.64 -> Since it's a function, we can also pass arguments.
So I'm going to say props I mean honestly speaking
496.72 -> you can call it anything you like you can you can
say 'myprops' it doesn't matter. But props is a
505.44 -> an accepted nomenclature when you do that
510.32 -> that means that the function or
the component that is calling this
517.44 -> when you do that2, that means that
the function or the component that
521.76 -> is calling this prop, can actually pass
some arguments. So I would say for example
530 -> outlet name equals to logical
copy this I'm gonna say
542.4 -> 'Maths'. Now notice that this part to the left
part of the variable or the prop is up to you,
550.88 -> so this name can be anything. You just need
to make sure that whatever name you use here
557.44 -> you just need to use the same name here to get
that data. Let's say props.outletname. Now this
567.36 -> outlet name is actually coming from props so you
can actually go here and like you can say outName.
575.36 -> The left hand side doesn't matter
but right hand side does matter.
579.36 -> There's one more thing I would
like to do is, I would like to log
583.36 -> this props, so that you know uh what you are
receiving, like how does it look actually and
589.84 -> to make it much more clear a bit more
clear I'm gonna pass another another
597.28 -> another prop and I'm gonna call it
604.72 -> 'isFancy' equals to true.
613.76 -> If we go back to the browser
and I refresh the page
620.16 -> you'll see that we log the prop and first the for
the first instance of that component you got an
628.4 -> object which says it's fancy true and it says
outlet name logical and for the second one it
634.72 -> says outlet name maths now you must notice that
for the second one we did not pass isFancy. So
642.96 -> basically this props is just a dictionary
and you can get data out of it like this
649.12 -> or you can also deconstruct it in one go. You can
say outName, isFancy equals to props I'm gonna
660.08 -> comment this and you can also do it this way. So
I'm gonna just log it outName and comma isFancy.
668.56 -> you say that, you see that it says
isFancy true outlet name logical. And
673.12 -> for the second one it says outlet name is
maths and since we are logging two things
679.28 -> it says that it says that isFancy is not
defined because for in this component,
684.72 -> we did not pass that prop. Brilliant.
With that understanding let's go back,
694.16 -> I'm gonna delete this I'm gonna use it this
way because what I want to do is I want to say
701.36 -> I'm going to delete this because
I want to say isFancy equals to
709.44 -> props.isFancy and if this is not
provided I'm going to say false.
716.4 -> This way I will make sure that I always
have this variable. It is never not defined
723.12 -> okay? Beautiful.
Now since we have these
726.56 -> values and variables and props let's
use them. So I'm going to say copy this
732.56 -> instead of hard coding this. I'm going to do this
so this is how you insert a variable into a text
742.48 -> and let's see what we can do with it. isFancy in
in a while if we go back now you see it says hi
750.24 -> I'm from logical pizza outlet hi I'm
from maths that's good right. So wait,
755.92 -> I hope no one is feeling hungry because
we have been talking a lot about pizza.
762.64 -> Perfect.
Now since we have our Dominos pizza,
766.08 -> we would like to bake some pizzas and I'm pretty
sure you know how to do that. We're gonna create
772.64 -> an internal state to to keep account of
how many pizzas do we have. So I'll say
779.76 -> I'll say 'numPizza' I must 'setNumPizza',
um this should be equal to 'useState'.
791.84 -> I'll say start with the zero and that's how you
import 'useState'. VSCode does it automatically,
798.8 -> if it does not do it, you have to do it this way.
So every outlet starts with a zero pizza so let's
810.4 -> put it let's just display
that I'm gonna say we have
822.72 -> 'numPizza' pizza(s) available.
If you go back to our browser
827.6 -> at zero pizza, it also have zero pizza. What
I would also like to do is I would like to
832.88 -> just create an horizontal line so that we
can differentiate between both of these.
841.28 -> Beautiful.
843.04 -> And now we are able to read the data. Now we
would also like to do is, we would like to
848.96 -> you know bake some pizza. Let's create a
button, the type will be of course 'button' and
857.28 -> we will say bake one one pizza
866.72 -> Perfect.
Obviously doesn't do anything because we did
870.24 -> not tell it to do anything. So let's tell it to do
something. We'll say const 'handleBakePizza' that
880.32 -> would be an anonymous function and all we want to
do is we want to change that variable. We will say
886.64 -> and we will do that by using this set
function provided by 'useState' hook.
891.68 -> And we'll say whatever the current pizza value
is please make it plus one. And we'll copy this,
899.76 -> bind this button this function
so we'll say 'onClick'
906.08 -> please call this function.
Please notice that we are not calling it this way,
911.52 -> when you do a parenthesis that when you want
to execute this function. Here we don't want to
917.52 -> execute the function, we just want to provide
the reference. So that whenever the button is
922.08 -> clicked, this function is executed and when this
function is executed it will call this function,
929.92 -> which is 'setNumPizza' and when 'setNumPizza'
is called it's going to update the value of
936.08 -> 'numPizza' variable. Which eventually is a state
variable. Whenever a state variable changes,
943.36 -> react will re-render your component to the
screen. Which means that this line will be
949.28 -> updated and this line will be updated. Okay
lot of theory, let's see that in practice.
955.6 -> Clear this. We're going to say bake one pizza.
Beautiful.
959.12 -> And bake one pizza as you can see that
the state variable for this component
963.68 -> and this component are independent, they
do not share the values with each other.
970.48 -> So as promised, if you go back to our learning
objectives, we want to talk about props.
976 -> We did that and we wanted to talk about parent to
child props we already did that because if you go
982.48 -> back and pay attention this is a parent component
which is calling a domino pizza and domino's pizza
991.68 -> is receiving props from its parent.
Isn't that beautiful? Perfect.
998.56 -> I also want to send so that's okay let's save it
here now let's see the last learning objective of
1007.68 -> this video. Which is, child to parent prop. And
we're going to simulate that by creating another
1015.76 -> by creating another component. So I'm
going to go to my component folder,
1019.76 -> right click, create new I'll say
1031.44 -> Now we know that component can receive
props, so we're gonna use that knowledge.
1038.4 -> I'm being we're gonna just return I
am from Sell Pizza. And I will sell
1050.76 -> {} num of pizza pizzas whatever um so
let's put a variable here 'sellNumPizza'
1067.52 -> copy this create this and we are expecting
to receive this detail from props
1080 -> Perfect.
1080.72 -> Um of course we need to export
this so that reacts can find it
1087.84 -> Beautiful.
Coming back to the parent one,
1091.52 -> now instead of creating a button we're gonna
create another comp. We're gonna create another
1095.92 -> component inside a component and we call it
'SellPizza' which should not come as a surprise
1102.08 -> to you because now you're a master of components
and you know everything that there is to learn
1108.08 -> about components. Okay I forgot the name, I
have a memory of maybe worse than a goldfish,
1116.4 -> I'm going to copy this. This is the variable that
we really want to send so we'll say equals to 1.
1125.52 -> So this 'SellPizza' button or component can
sell one pizza. Hopefully. Okay go back to our
1134.24 -> browser and we say okay I am from
'sellPizza' I will sell one num pizza. Good.
1141.92 -> I know I know I talk about that we will not do
any styling but let's just put a break line you
1148.72 -> know so that it looks little bit okay. Perfect.
With that let's see how we can sell a pizza. So
1159.44 -> I would like to post this as a challenge
to you. Think about if this is your
1164.72 -> if this is your parent component that has num
number of pizzas that it has already baked,
1171.28 -> what does it mean to sell pizza? And how would you
'sellPizza' using using the 'sellPizza' component?
1180 -> I'm gonna I'm gonna wait
here for a couple of seconds,
1182.48 -> if you want you can pause the video and come back?
1187.68 -> Alright, I'm back. Um if you're able to do it very
nice, I'm really proud of you. And if you if you
1194.48 -> struggled there's no worry about it, just follow
along with the video and you'll be fine okay?
1200.64 -> So we want to reduce number of pizzas
whenever something happenes here. So
1207.84 -> to something happen here, let's create a
button. So that we can you know capture
1212.64 -> an event type as always this button
will say sell {sellNumPizza} pizza
1220.64 -> then um right um I'm gonna remove this
because why not. I'm from 'sellPizza' Sell
1232.56 -> one pizza. Of course it doesn't do anything
because we did not tell it to do anything
1238.56 -> and as you know when you want to tell a
button to do something we always say 'onClick'
1243.92 -> 'handleSellPizza'. We have not created this
function yet, so let's do that. So that REACT
1253.36 -> stops complaining about it. Right now this
function doesn't do anything, which is okay
1260.48 -> and all we want to do is we want to reduce
this variable. We want to update this
1267.12 -> variable and we have learned to update a state
variable we always use the provided function
1274 -> now to your surprise or maybe not you can
also pass a function reference as a prop.
1282.8 -> what this means is that I can go here
in the child component I can say const
1292.24 -> props.setNumPizza. Now I have
a function I have a function
1303.6 -> that can do something, in
our case and update numPizza
1316 -> on the parent
1319.28 -> and this function was provided to
us by the parent so we can trust it.
1330.4 -> Trust it in a sense that it will it
will do what it is supposed to be doing.
1335.92 -> Now it's extremely. Simple I'll copy
this I'll come here I'll say here and
1345.6 -> we are missing one piece of one piece of the
puzzle. Which is we don't know what is the current
1350.8 -> number of pizzas um our parent
has. No problem, we can go here
1358.88 -> and we will send that as a prop as well.
1364.8 -> Coming back to the child we're
just gonna get it from the props.
1372.24 -> And now we can say minus 1. Fingers crossed,
moment of truth. Let's refresh everything.
1383.68 -> Bake one pizza, sell one pizza. Do you like
it? I love it. Same goes for this component.
1393.84 -> With this we have completed all our learning
objectives of this video. We learned,
1400.88 -> what are components? These are basically separate
piece of code that you write so that it can have
1407.36 -> an independent UI, so that you can reuse them,
and to do all of this it take props as an input
1416.48 -> and the props can be sent from parent to
child and from child to parent as well.
1423.2 -> Technically, you cannot send props from child to
parent but you can talk to parent by using the
1429.92 -> props send by a parent to the child. This might be
confusing, I'm going to repeat that one more time.
1438.72 -> Dominos is our parent and we are calling this
component and we are sending some props to sell
1445.68 -> pizza. This is the first part. Where we send
data from parent to child and you saw this
1451.76 -> already in index as well. Where we called the
dominos and we sent for example couple of data.
1459.52 -> Now coming to the other part, where
how child can communicate to parent.
1464.8 -> It is via props as well, but child never sends any
prop back to the parent component. It only uses
1473.44 -> the props that are sent by the parent to the child
and the interesting part is that we can also send
1481.68 -> so along with variables and constant, we can also
send function reference to the child. And then
1487.2 -> child can call these functions and hence and hence
you can update the state variables in the parent.
1496.56 -> Now the way we have designed our you
know 'handleSellPizza' it's a little
1501.12 -> bit cumbersome right? I mean from the
parent we are sending number of pizza,
1506.8 -> we are also sending the function
I think it is too much and maybe
1514.48 -> maybe the 'sellPizza' are component does
a lot of things already. So for example
1522.72 -> before you know reducing this number
it updates it updates the database.
1535.2 -> Maybe checks if user is logged in
to sell pizza and things like that.
1547.52 -> And to do that we created this
separate component which makes sense.
1553.2 -> But there might be the case that you probably
want to sell pizza from the parent as well.
1559.44 -> And to do that what I would do
is I would say 'handleSellPizza'
1568.08 -> I'm going to make it little bit complex but bear
with me you're gonna you're gonna love this.
1573.68 -> And it's 'sellPizza' and I'm gonna say
1577.84 -> 'numOfPizzaToSell'
1583.44 -> and since we are in the parent
component I can say 'setNumPizza'
1591.28 -> as whatever numPizza is right now minus
1597.12 -> This variable.
1603.28 -> Okay. Now whenever this function is called
it should be able to reduce the number of
1608.96 -> pizzas from our parent component. Now we actually
don't need these two, I'm gonna delete this and
1618 -> we only need 'handleSellPizza'. It should be that
of course, I misspelled it so I'm going to fix it
1629.04 -> now if I go to self reserve I'm going to copy this
1635.44 -> and this prop should be
this and we don't need this.
1643.28 -> okay and here we just need to call this
function we literally don't have to do anything
1654.08 -> we will say
1658.88 -> we'll create an anonymous function
and we will say call the function.
1665.92 -> Um let's say just sell pizza because I have
removed that prop and I don't want to rewrite
1671.76 -> it. But this should give you a gist. So
we are saying that I am from sell pizza.
1677.52 -> 'onClick' of this button I want to call this
function, this function is provided to us
1682 -> from the parent and parent takes care of how
many pizza do we want to sell. It takes a
1689.2 -> it takes a parameter, I'm gonna say one so that
we are able to reduce one pizza from 'numPizza'.
1695.68 -> If you go back clear everything refresh.
1700 -> bake one pizza, sell one pizza. Do
you like it? I love it. Beautiful.
1708.08 -> There's one more concept I would really like to
emphasize here so that we have everything that we
1713.76 -> need to know and that's I mean conceptually you
know everything but couple of tips and tricks.
1719.76 -> If you remember I passed this isFancy prop
to our dominos pizza and we never used it.
1726.96 -> I think now is the time to use it. So let's
do that, I'm gonna copy this and I'm gonna
1734 -> say isFancy so whenever this is true
1746.48 -> honestly um whenever this is
true I'm gonna sell two pizzas
1752.08 -> this is not true
1756.8 -> right if it's not true I'm
gonna sell only only one pizza.
1765.68 -> Beautiful. Now let's also look here.
1772.8 -> Need to get that variable
from props, so let's do that
1778.8 -> and instead of passing one
you just need to pass this.
1785.44 -> And maybe just for representation
purpose, it doesn't have to
1789.84 -> doesn't have to be this way and as I said
there are multiple ways of doing one thing and
1798.64 -> you can do whichever way you like. So if I
also sent this isFancy to sell pizza and let's
1806.16 -> get that here isFancy equals to prop.isFancy
and here we're gonna say if isFancy is true
1818.64 -> I'm gonna say I i am a fancy selling component.
1831.36 -> In case, isFancy is not true, hi I am
a you know a regular selling component.
1839.84 -> Oh my god, um let's create so that
we are able to see things. So we have six
1848.32 -> pizza available we have five pizza available
bake one pizza I am from selling pizza. I am a
1854.88 -> fancy selling component. Hold on a second there's
something wrong they both cannot be fancy right?
1877.28 -> this
1880 -> okay perfect. It seems like we were not sending
the data with the variable. So now this is a fancy
1888.72 -> selling and this is a regular one. So regular one
as you remember only sell one pizza at a time.
1893.68 -> The fancy one sells two pizzas.
Perfect.
1898 -> I think we want to stop here and as promised
uh we have covered all our learning objectives.
1904.48 -> I hope you enjoyed this video and yeah I'm
gonna see you in the next one. Until then
1909.76 -> cheers. Before you move to
the next video, can I please
1913.36 -> request you to like this video and subscribe the
channel, it will mean a World to me thank you!!
Source: https://www.youtube.com/watch?v=h8yPoIDEbDM