Props from Child to Parent Component (Hack)

 

0:00

hello everyone so today i decided to

0:03

make a quick video on

0:05

how to pass props from your child

0:07

component to your parent component

0:09

and react but before something you're

0:11

like no you can't actually do that you

0:13

can't quite actually do

0:14

that yes yes i know that's why i called

0:17

it a hack

0:17

in the title is it a hack though i don't

0:20

know who cares right you've come here

0:21

because you basically want to find out

0:23

when something happens in your child

0:24

component or when you make something

0:26

happen in your child component

0:28

you want that to affect the parent

0:30

component right

0:32

okay so i'm going to show you how so

0:34

first off before we start it is my

0:36

developer duty

0:37

to tell you that you can't actually pass

0:40

props

0:40

from a child component to a parent

0:42

component you

0:44

can however pass functions so what we're

0:47

going to be doing is making the child

0:48

call a function that in turn changes the

0:51

state in the

0:52

parent component and once that state is

0:55

changed

0:55

you've guessed it the parent component

0:57

is going to pass that information down

0:59

as props

1:00

into the child got it good

1:03

in this super simple tutorial i'm going

1:05

to show you how to do this with react

1:06

hooks

1:07

so i'm going to be updating the word

1:09

parent and the parent component right

1:11

here

1:12

by clicking the button in the child

1:14

component

1:15

cool okay what are we waiting for let's

1:18

do this

1:19

okay so this is my setup for react as

1:22

you can

1:23

see i've already gone ahead and made a

1:26

parent and a child

1:30

the child hasn't been put inside the

1:32

parent yet

1:34

i'm going to be doing that in a little

1:36

bit i've imported

1:38

react for us to use i've also imported

1:41

some styling to make the parent look

1:44

like the green

1:45

box that it is and of course just put a

1:48

standard h1

1:49

parent uh h1 tag with the word parent in

1:53

it okay

1:54

now the child is similar it's got an h1

1:56

tag with the child

1:58

word in it so we know it's the child

2:00

that's simply just for us

2:02

and a button okay the button at the

2:05

moment has no functionality

2:06

but but it's that okay first things

2:10

first

2:10

let's go ahead and import the child for

2:13

us

2:13

to use so import

2:17

child from child there we go

2:22

that is done so now we've got the

2:24

child's component in here

2:26

let's go ahead and put it in our parent

2:28

component

2:29

so i'm just going to go ahead and put

2:31

the child component

2:33

right here there we go i actually don't

2:36

need that let's just close it off

2:39

okay so now if i click refresh

2:43

ah oops i've got the wrong uh path so

2:47

it's actually my components folder i

2:48

believe

2:49

so let's go ahead and find that so in

2:51

here components because that's where i

2:54

stuck it

2:55

standard mistake save and let's compile

2:59

that

2:59

okay so now we can visually see our

3:02

parent

3:03

with its child component inside and as i

3:06

said the button is there too

3:07

with no functionality now say i want to

3:11

do something

3:11

in the parent that will affect the child

3:13

because as we know props are passed down

3:15

from parent to child

3:16

if we want to reverse that well we can

3:18

actually use a function

3:20

so let's go ahead and do that now

3:24

in the child component we want to

3:27

add a function on click of the button

3:32

so on click and then let's

3:37

open this up like that on click we want

3:38

something to happen

3:40

now we know that on click we want to

3:42

change the parent word okay so let's go

3:44

ahead let's

3:44

put a function in here so this is an

3:46

arrow function

3:48

okay now we want to change words so this

3:51

is the function that i haven't written

3:53

yet

3:53

we want to change the word on the click

3:56

and we want to change the words to i

3:57

don't know

3:58

anya why not sure okay so now we have

4:01

this function here

4:03

obviously we are failing to compile

4:05

that's

4:06

natural what we need to actually do is

4:09

go

4:10

back to the parent here

4:14

and in the child component the function

4:18

that we wrote set that as a prop

4:20

so change word

4:25

let's open this up and now

4:29

we're gonna get that word or prop and we

4:32

are gonna

4:33

use set word

4:37

word so if you haven't uh used hooks

4:40

before i very much recommend

4:42

that you look into that now because i'm

4:43

going to be using the use states

4:45

so let's import that first use state

4:51

okay and i'm going to be updating the

4:54

state of this parent with the use

4:55

state hook so const

5:01

then word set

5:04

word so this is essentially what we've

5:06

got here if you

5:08

know hooks you will know that this set

5:11

word

5:12

will essentially in a way i guess set

5:14

this word to be whatever is passed

5:16

through here

5:17

okay use state and we're going to start

5:20

off with the state being

5:22

parent because that was our word parent

5:26

remember

5:26

so if i actually set that to here so i

5:30

when we start this up and we use state i

5:33

want the state of word

5:34

so i want the word to be parent so now

5:37

if i actually replace this with word

5:40

let's click save that will show up in

5:43

the browser

5:44

which we obviously can't see yet we

5:46

still have one more thing to do

5:47

and that is go back to the child and

5:50

pass props

5:54

because this is essentially if you

5:55

remember to the beginning of my video

5:57

we're going to be

5:57

invoking a function or calling a

5:59

function the child which will then in

6:01

turn

6:02

update the state here

6:06

so like that and then here and then we

6:08

need to pass it back down again

6:09

okay so that's what's happening we need

6:11

props

6:13

this function is also a prop so props

6:15

change words

6:17

let's click save okay

6:20

so now when i click the button here

6:23

let's actually maybe

6:25

make this more readable for you guys

6:30

okay so button click change

6:34

button

6:39

okay so now

6:45

when we click to change title ta-da

6:49

it is changing to anya now what i said

6:52

before

6:53

this word here is essentially whatever

6:55

we so if we refresh again so this is

6:57

back to the start

6:59

i can use the state to update this word

7:01

at the beginning

7:02

so i'm going to change this to bob and

7:05

if i click

7:06

save bob is there okay so bob

7:09

is our word use state bob

7:12

bob bob is our word now we want to

7:15

change

7:16

bob so we do this with the help of what

7:18

we've written here

7:20

here and here so now on click we invoke

7:24

a function

7:25

because this is an arrow function and we

7:27

use the function

7:29

to change the word in the state of

7:32

parent to anya

7:33

so there we go simple

7:37

okay so this was like a really quick

7:38

video it's just something that i found

7:40

quite useful

7:41

and i thought i'd address if any of you

7:43

were ever thinking about how to pass

7:46

props from child to

7:49

parent but hack because as we know

7:53

it's not really possible you use a

7:55

function

7:56

okay thanks so much for coding with me

7:59

if you enjoyed this video and find it

8:00

useful please do let me know so i know

8:02

to create more like this

8:04

uh do like and subscribe and i'll see

8:06

you soon