Coding

ReactJS Basics – #6 Passing Data with Props

  • 00:00:01 hi welcome back so we have multiple
  • 00:00:04 components already and that's great and
  • 00:00:07 that would allow you to create a
  • 00:00:09 flexible app with multiple components
  • 00:00:12 but there is something missing or there
  • 00:00:15 are actually a lot of things missing but
  • 00:00:16 I'll come to you then one thing is right
  • 00:00:19 now we're not really taking advantage of
  • 00:00:21 the fact that we're doing all that a
  • 00:00:23 Java Script we're not really able to
  • 00:00:25 react to user input we're not really out
  • 00:00:28 putting anything dynamic right now
  • 00:00:31 there's no real advantage to just
  • 00:00:33 creating pure HTML right well we'll get
  • 00:00:37 there step by step and one important
  • 00:00:40 thing is of course passing data from
  • 00:00:44 components to components so let's say
  • 00:00:47 from my app component I want to pass
  • 00:00:50 data to my home component because home
  • 00:00:53 component is as all components are a
  • 00:00:55 component I can reuse I can use multiple
  • 00:00:58 places I could create two home
  • 00:01:00 components after all and if I save this
  • 00:01:03 we see two unique components and each
  • 00:01:07 component might have a different
  • 00:01:08 configuration so it would be nice if I
  • 00:01:12 let's say could pass something like a
  • 00:01:13 name or a age or whatever configuration
  • 00:01:16 to this home component and display it
  • 00:01:19 there and we can do this with a concept
  • 00:01:22 called props for properties so what are
  • 00:01:26 props therefore well for the case that
  • 00:01:29 we have a component in another component
  • 00:01:32 inside of another component and we want
  • 00:01:35 to configure this component then we can
  • 00:01:38 pass props into this component so back
  • 00:01:41 in the code this would work like that
  • 00:01:43 let's say you home components should get
  • 00:01:45 a name and it's totally up to you what
  • 00:01:47 you name this you can define what you
  • 00:01:51 want to pass in there and then you pass
  • 00:01:54 data by enclosing it in single collie
  • 00:01:57 braces and then let's say a string in
  • 00:01:59 this case Max and I also want to pass
  • 00:02:03 something else let's say the age also in
  • 00:02:05 overall I'm passing some user data here
  • 00:02:07 now the age would be a number in clothes
  • 00:02:10 in curly braces like that and you could
  • 00:02:12 also pass an object here so let's say I
  • 00:02:16 also have my user object here and in
  • 00:02:21 this user object then you could have
  • 00:02:23 something like again let's say 'no name
  • 00:02:26 would be an a' and then hobbies could be
  • 00:02:30 an array sports whatever you like
  • 00:02:34 something like that and then you could
  • 00:02:37 also pass this so you also pass the user
  • 00:02:39 object n which is user there's one here
  • 00:02:43 it should be a variable of course so
  • 00:02:46 that is how you pass props you just to
  • 00:02:49 find them like HTML attributes on your
  • 00:02:52 component and then the data you pass has
  • 00:02:54 to be enclosed in single curly braces
  • 00:02:57 here and with that I can go to my home
  • 00:03:01 component which will receive these props
  • 00:03:03 and now how does it receive or how can I
  • 00:03:06 use the props in here it's actually
  • 00:03:09 really simple
  • 00:03:10 I can't exited any render method or
  • 00:03:13 access it here in the render method by
  • 00:03:16 accessing this dub props so even though
  • 00:03:20 I haven't created a property named props
  • 00:03:23 in this class well remember we're
  • 00:03:25 extending react component and react
  • 00:03:28 component has this property so therefore
  • 00:03:30 I do have access to my props here I can
  • 00:03:34 lock this to the console and if I go
  • 00:03:36 back to my application you see we locked
  • 00:03:40 something here let's reload it here are
  • 00:03:44 some objects and why is the second one
  • 00:03:48 empty well because I'm loading home
  • 00:03:51 component twice right and only the first
  • 00:03:53 time I'm passing data is second time
  • 00:03:55 it's empty that's why the first time my
  • 00:03:57 props property provided by react has my
  • 00:04:01 name my age and the user object and if
  • 00:04:03 we have a look at this object well they
  • 00:04:06 can of course access all the data here
  • 00:04:08 well that means we cannot only access
  • 00:04:10 this he exited here access it here in
  • 00:04:13 the console we can also output it so in
  • 00:04:16 a new component we could say your name
  • 00:04:20 is and then this is how you output data
  • 00:04:23 and
  • 00:04:24 component also with single collar braces
  • 00:04:26 this props name for example so now we're
  • 00:04:30 getting to the place where our
  • 00:04:32 components actually make sense we can
  • 00:04:35 output data we can not only show static
  • 00:04:38 content but instead output something
  • 00:04:41 like for example properties and we could
  • 00:04:45 output data which is not passed by props
  • 00:04:47 here too I could all just output let's
  • 00:04:51 say some text which is something like so
  • 00:04:58 I could also output dead with single
  • 00:05:01 quality braces text and the second thing
  • 00:05:05 you learned how to pass props and how to
  • 00:05:08 use them like so oops that should not be
  • 00:05:11 in the return statement though should be
  • 00:05:13 above it so with that I'm outputting the
  • 00:05:16 name and your ages and then I would put
  • 00:05:22 this prop star age and we also have to
  • 00:05:27 user object so you could say user object
  • 00:05:31 name is this props props user name and
  • 00:05:39 then we had the hobbies right name and
  • 00:05:43 hobbies right it's called user
  • 00:05:46 yeah so this and then we also have the
  • 00:05:51 hobbies like or let's create and you
  • 00:05:54 line for that a div and then we have
  • 00:05:58 hobbies like so hobbies and then we want
  • 00:06:06 to output them in unordered list let's
  • 00:06:08 say now here is the question how could I
  • 00:06:12 loop through such an array and now I
  • 00:06:15 know that is quite a lot we're learning
  • 00:06:18 at the same time but it's key to to
  • 00:06:20 understand what's happening here
  • 00:06:22 looping through items in react is
  • 00:06:25 actually really elegant you can do it
  • 00:06:29 directly here
  • 00:06:30 could do it before too but you can do it
  • 00:06:32 here in your HTML code if you want to
  • 00:06:36 call it like that by accessing whoops go
  • 00:06:40 out of T list item for now by accessing
  • 00:06:43 this dot props user dot hobbies then we
  • 00:06:48 can use the map function since this is
  • 00:06:50 an array and we can basically just say
  • 00:06:53 we have a callback in here what we want
  • 00:06:56 to do for each element in this array
  • 00:06:58 that's what the map function allows me
  • 00:07:00 to do so I'll use T fat arrow syntax
  • 00:07:03 since we use es6 code if you're not
  • 00:07:05 aware what this is definitely have a
  • 00:07:07 look at some es6 tutorials basically
  • 00:07:11 this will give me each individual hobby
  • 00:07:13 the name here is up to me and it can use
  • 00:07:15 this hobby then to output something and
  • 00:07:19 to something should be the list item
  • 00:07:21 where I then went to output the
  • 00:07:24 individual hobby again enclosed in
  • 00:07:26 single curly braces even I'm in collie
  • 00:07:28 braces here already that is how you
  • 00:07:31 would do that now to make this work I'll
  • 00:07:34 go back to the index page remove the
  • 00:07:36 empty home component for now so instead
  • 00:07:38 would give me an error but otherwise
  • 00:07:39 because I'm trying to upper things the
  • 00:07:41 other component doesn't have and then if
  • 00:07:43 I go back you see well we got all the
  • 00:07:46 wonderful new output dynamically added
  • 00:07:48 to get our hobbies here to get to
  • 00:07:51 something here which is this text and we
  • 00:07:54 got the name we pass in the age and from
  • 00:07:57 the user object name so really a lot of
  • 00:08:01 stuff and all dynamically input into my
  • 00:08:05 render function and into this component
  • 00:08:07 here through props from outside of it
  • 00:08:10 but like text also from inside of it the
  • 00:08:14 key thing to take away is that this is
  • 00:08:17 the syntax how to output data in your
  • 00:08:19 component in your HTML code in the
  • 00:08:22 components able to say similar curly
  • 00:08:24 braces and then whatever you want output
  • 00:08:27 can be properties you're getting passed
  • 00:08:30 into from outside but can also be
  • 00:08:33 variables or properties of your home
  • 00:08:36 class here like texts which is this
  • 00:08:39 variable defined up here and that's
  • 00:08:41 really key to understand as of
  • 00:08:43 is this way to loop here now regarding
  • 00:08:47 loop there's an interesting thing we
  • 00:08:50 don't see it here but first I'm adding
  • 00:08:54 another hobby year let's say reading and
  • 00:08:58 that will work but if we open up the
  • 00:09:01 console we see that we get this warning
  • 00:09:04 which tells me that I should provide a
  • 00:09:06 unique key for each property here and
  • 00:09:10 that is because I'm in a loop here with
  • 00:09:13 the list item and in order to make
  • 00:09:16 reactions work better get a better
  • 00:09:19 performance so to say I should give each
  • 00:09:23 element a key so that reacts yes is able
  • 00:09:26 to uniquely identify it otherwise when
  • 00:09:30 checking if it needs to update it will
  • 00:09:34 need to check all the elements as
  • 00:09:36 doesn't have clear references to assign
  • 00:09:39 a key is simply right key here like a
  • 00:09:42 prop and then just give it a key and in
  • 00:09:47 order to get one I'll add a second
  • 00:09:48 argument to my fat arrow function to the
  • 00:09:52 arguments that get passed into it
  • 00:09:54 automatically by the map method Welch I
  • 00:09:57 will name I which is just the curd
  • 00:09:59 iteration number is so starting at zero
  • 00:10:01 than one and so on and I will pass this
  • 00:10:05 as a key and with that if I save it well
  • 00:10:08 you see that's just some hot reloading
  • 00:10:10 bucks I got but the warning went away
  • 00:10:13 and with that I got clean code again I
  • 00:10:16 love that you saw how to output data and
  • 00:10:19 how to pass props two very important key
  • 00:10:23 concepts to work with react tests and to
  • 00:10:26 build react chess applications which are
  • 00:10:29 more than just displaying HTML pages but
  • 00:10:33 instead are actually outputting data are
  • 00:10:36 dynamic and are able to interact with
  • 00:10:39 each other though until now only from
  • 00:10:42 parent to child but we'll see the other
  • 00:10:44 direction soon too before we're coming
  • 00:10:47 to events and state and how components
  • 00:10:50 can interact with
  • 00:10:52 let's talk about props a little bit more
  • 00:10:54 there are two other things which are
  • 00:10:56 important which I want to highlight here
  • 00:10:58 the first one our prop types prop types
  • 00:11:02 as a concept you will find in react
  • 00:11:05 chairs which allows you to validate
  • 00:11:06 these props it's a good practice to set
  • 00:11:09 up prop types to tell react what type a
  • 00:11:12 certain prop type will have for the home
  • 00:11:16 component you can set up home or prop
  • 00:11:18 types by accessing your home class
  • 00:11:20 outside of it here outside of the class
  • 00:11:23 body and then access prop types like
  • 00:11:27 this that's an object you got built in
  • 00:11:31 to react chairs there's simply is a
  • 00:11:34 challenge with the object and there you
  • 00:11:36 list all your props you're expecting a
  • 00:11:38 skis so we have a named prop then we
  • 00:11:42 have an H prop and we have this user
  • 00:11:45 prop and then you configure them so the
  • 00:11:48 name prop here for example is and then
  • 00:11:51 you access react for that and then you
  • 00:11:53 prop types object on you react based
  • 00:11:57 class here or base module this shall be
  • 00:12:00 a string like that so with that I'm just
  • 00:12:04 telling react hey this property this
  • 00:12:07 name property will be a string and in
  • 00:12:09 order to learn more about available
  • 00:12:11 prompt types simply leverage the
  • 00:12:13 official react.js page and then HS
  • 00:12:16 Google for prop types to find out more
  • 00:12:19 about available prompt types here the H
  • 00:12:23 here for example will be of type number
  • 00:12:28 and the user here will be an object so
  • 00:12:32 this will be of type object and again
  • 00:12:37 it's just a good practice to do this and
  • 00:12:39 obsess with all be capital case by the
  • 00:12:43 way capital case P here at the beginning
  • 00:12:46 for prop types so with that if you save
  • 00:12:48 that you see it still works but it is a
  • 00:12:51 good practice to let react.js know about
  • 00:12:53 these prompt types and well use them
  • 00:12:56 prop types and force that your
  • 00:12:59 components get used correctly and you
  • 00:13:01 get errors
  • 00:13:02 huge right you set a prop to a type it's
  • 00:13:05 not meant to be we do this because
  • 00:13:07 JavaScript doesn't have types built-in
  • 00:13:09 right it's not typescript it has dynamic
  • 00:13:12 types we can reassign a string to be a
  • 00:13:15 number therefore prop types allow us to
  • 00:13:18 make sure that we only use the types we
  • 00:13:20 want to use now the other thing I wanted
  • 00:13:23 to show you is that you can also pass
  • 00:13:26 data into a component from another
  • 00:13:30 component without using props because
  • 00:13:33 consider this example here you have your
  • 00:13:36 home component that's all nice but
  • 00:13:39 besides these props you pass here you
  • 00:13:42 might have let's say some text you want
  • 00:13:45 to pass and there would be a common
  • 00:13:47 thing if you think about a widget like
  • 00:13:49 let's say a tabs component where you
  • 00:13:51 have multiple tabs then you might want
  • 00:13:54 to pass a specific text or HTML killed
  • 00:13:58 into this component from outside and not
  • 00:14:01 through a prop so you want to write
  • 00:14:03 something like this opening a closing
  • 00:14:05 tag and in between you want to have
  • 00:14:09 let's say a paragraph this is a
  • 00:14:12 paragraph like that now it would be nice
  • 00:14:16 to render this paragraph in my home
  • 00:14:19 component and in order to do this
  • 00:14:22 reaction has a special property you can
  • 00:14:26 access it's called on this props of
  • 00:14:30 course and then children now children is
  • 00:14:33 a reserved word which just means
  • 00:14:34 whatever is passed between the opening
  • 00:14:37 and closing tag here so face saved is
  • 00:14:40 and go back we see this is a paragraph
  • 00:14:42 and if we inspect this we'd see it
  • 00:14:45 really is a paragraph so the HTML code
  • 00:14:48 was also passed successfully not just a
  • 00:14:51 text also DP tags and that is how you
  • 00:14:55 can use or pass complete code including
  • 00:15:00 components by the way from outside into
  • 00:15:03 a component yes using props indirectly
  • 00:15:07 but not setting it up as props here in
  • 00:15:10 this attribute like style of course it's
  • 00:15:14 a good practice
  • 00:15:15 also set up the children props here so
  • 00:15:18 children and now since you can't define
  • 00:15:20 the type of that what is a good idea is
  • 00:15:24 to access prop types and then element is
  • 00:15:27 required for example no it's not that is
  • 00:15:30 required like this if I save this and go
  • 00:15:35 back it should work and no errors in the
  • 00:15:37 console so what Dad were using your
  • 00:15:40 children props again a reserved word we
  • 00:15:43 set it up correctly here just make it
  • 00:15:46 required and we're passing it from
  • 00:15:47 outside of course that means whenever we
  • 00:15:49 recreate this home component we will
  • 00:15:51 have to pass something since children is
  • 00:15:54 required in our case here so with that
  • 00:15:57 we're done having a look at props we
  • 00:16:01 learned a lot about props and not only
  • 00:16:03 props also how to generally output data
  • 00:16:06 in react that really was a key part of
  • 00:16:10 the series and with that we can continue
  • 00:16:12 to events and then also state