Coding

ReactJS Basics – #5 Outputting dynamic Data

  • 00:00:00 welcome back so we learned how to use
  • 00:00:03 multiple components to well nest them in
  • 00:00:06 each other and to create our replication
  • 00:00:08 with different components which of
  • 00:00:10 course is an important step but we not
  • 00:00:13 only want to display static content so
  • 00:00:16 or a static HTML code here we also want
  • 00:00:19 to display dynamic content and react is
  • 00:00:22 makes this very easy you can output
  • 00:00:26 dynamic content in your template or in
  • 00:00:29 your render method here by using curly
  • 00:00:33 braces single column braces that's
  • 00:00:35 important especially if you're coming
  • 00:00:37 from an angular 2 background for example
  • 00:00:39 in these curly braces you can write any
  • 00:00:42 valid JavaScript expression for example
  • 00:00:45 2 + 2 + if I save this and then go back
  • 00:00:50 well you see I got 4 here so that is how
  • 00:00:55 I can output things here now what will
  • 00:01:00 happen if I do this let's say I write a
  • 00:01:03 multi-line expression like that that
  • 00:01:07 doesn't work so you have to keep it to
  • 00:01:09 one line but in the one line you may
  • 00:01:12 write whatever you want if you have more
  • 00:01:14 complex logic what you want to write or
  • 00:01:17 that you would output you can do this in
  • 00:01:20 the render method here before for
  • 00:01:23 example half if condition and then do
  • 00:01:26 something like flat or you don't have a
  • 00:01:32 variable let content equals an empty
  • 00:01:35 string for example and then you just
  • 00:01:38 assign content to be whatever you want
  • 00:01:42 it to be lets say a paragraph whoops no
  • 00:01:45 a paragraph where you say hello well
  • 00:01:48 then you could do it like that and then
  • 00:01:51 some we output the content variable here
  • 00:01:54 which allows you to output hello since
  • 00:01:58 true is of course always true and here I
  • 00:02:01 would have a more complex check outside
  • 00:02:03 of the return function and only output
  • 00:02:05 content the variable in my
  • 00:02:08 well returned function but again with
  • 00:02:10 the single curly braces and the single
  • 00:02:13 curly braces are important here of
  • 00:02:15 course
  • 00:02:15 so again single call erasers allow you
  • 00:02:18 to output variables or output any code
  • 00:02:22 your result of any code you have in
  • 00:02:25 between them could also be a string for
  • 00:02:27 example that would also work if I save
  • 00:02:30 this well then we see hello here so
  • 00:02:33 again between the curly braces that will
  • 00:02:36 be run as javascript code important
  • 00:02:39 thing to keep in mind it may only be one
  • 00:02:41 line you can use ternary expressions
  • 00:02:44 node so you could check check something
  • 00:02:46 like five equals two and if that is the
  • 00:02:49 case then you output yes otherwise you
  • 00:02:53 output no that would work and that
  • 00:02:55 should display no of course since five
  • 00:02:58 isn't equal to two so that will work but
  • 00:03:01 again it has to be one line and then you
  • 00:03:04 can output any calculation or any other
  • 00:03:07 variable and that is especially
  • 00:03:09 important for the next video where I
  • 00:03:12 will talk about props what props are and
  • 00:03:16 how to use them and then you will see
  • 00:03:19 many things off the well things I just
  • 00:03:22 show you so see you there
  • 00:03:24 bye