I created the separate component, a) of course to practice creating your own components but b) also because
it really is the core philosophy of React to split your app into smaller pieces.
Of course it's up to you how small you want to split it,
every list item for example could also be its own component and there would be nothing wrong with that.
The idea simply is to have small, manageable code files and later once we add more logic to the app so
that we can also interact with it and we changed the number of goals for example upon a button
click and so on,
we of course want to be able to manage a lot of the logic in the goal list component and not in other
components.
So really splitting it into components has the idea of separating concerns, of keeping your files small,
focused and manageable which, if you're working in bigger projects, is a huge win because it makes it
much easier to manage and work in such bigger projects.
Now thus far, everything in our app is hardcoded though,
now a more realistic would be that lets say our goal list is managed here in app.js as data and we
want to render the GoalList.html items or jsx items based on that data.
Now I'll manage it here in app.js simply because later I will add another component here that helps
us create new goals
but for now, let's just add a normal constant here to this functional component because it is a normal
Javascript function,
of course you can do more than just return jsx and this constant here will have my course goals,
you can name it however you want and this will be an array and in this array, each goal can be a Javascript
object, created here with the object literal notation, of course you could also create your own class
or constructor function and instantiate that to create such an object.
Now lets say every goal has an ID,
cg1 for course goal one and then has some text let's say and the text here is simply the text
I have hardcoded here,
finish the course.
So I'll
copy that and add this here and I'll split this across multiple lines to make it easier to read because I'll
not just have one goal but three.
So the IDs are cg2 and cg3 let's say
and now I will just copy all that text here into my objects here in app.js,
also that last text like this and there I can now also get rid of that ampersand thing here, we don't
need that here, we can output the text like this and React will render it properly.
So now we have the course goals array and my idea now is that in the goal list component, these goals,
that data here should in the end be output,
so it should be output dynamically in this component, in the goal list component instead of being hardcoded.
So we can remove this code here,
now that leaves us with two problems;
number one, how can we output a list of data dynamically in jsx
but more important than that at the moment, how can we get that list of data which is defined in the
app component into the goal list component?
Well let's focus on that first
because without that, we can't focus on the other problem.
We can pass data from component to component with a concept called props, short for properties. We can
define our own,
you could say attributes which are these props on our own components.
So for example here on goal list, we could say we have an items attribute or a goals attribute,
totally up to you,
I'll go with goals here and that goals attribute or prop is the common term,
so this goals prop, then passes data to that component.
Now for that,
I don't use a string here which I want to pass down but instead, I want to pass down my Javascript data
structure,
the array here and for that here actually, we use another special syntax in jsx, we use single opening
and closing curly braces.
Looks like we're creating a Javascript object here but we are not,
if you do this inside of jsx which I am doing here,
that's jsx, then this means you want to merge your jsx code with some Javascript expression in the
end
and here we can point at course goals. That is a valid Javascript expression,
we're just pointing at a constant and what this in the end means is that React will pass course goals here,
the value stored in this constant, in this case this array, into this place of jsx,
in this case into this prop therefore. So goals will be a prop that holds a reference to this array now.
Now inside of goal list, we can now receive that goals prop,
so let's go to goal list and see how that works. In goal list,
we have a function right,
a functional component,
now this function right now doesn't get any parameters,
we can change this,
we can receive a props parameter here. Every function that is used as a React component, which means
it returns jsx, also receives props.
This is an object passed to your React functional component automatically by React and it's an object that
bundles all the props you passed to the component,
so in our case goals is the single prop we have,
so here we will have an object which has a property with the name of goals that holds the value passed
to that prop. So in other words,
here I could console log props.goals, .goals because I named my prop goals here.
If you chose a different name here, which is perfectly fine, you have to use the different name here.
Now if we save that, we won't see our goals anymore at the moment but if we open the developer tools, we
see the array being logged here and that log is coming from goal list line 6 as you see which of course
is this log here and there, we see our goals data, which means yes it arrives successfully inside of
the goal list component.
The concept of props is a super important concept in React because this is what allows you to pass data
from component a, the app component to component b, the goal list component
in this case.
Now let's have a look at how we can output a list of data dynamically in jsx because here we got
a list of goals, an array of goals and we want to output this as list items here in our unordered list.