How can we output an array of data as jsx elements?
Well actually it's relatively trivial,
we will map this array of Javascript objects to an array of jsx elements because React is capable
of outputting an array of Javascript elements. For that,
let me show you how this works,
let's use these single curly braces because I want to add a Javascript expression here and my expression
here is a simple array but an array of list items;
Hi and that then another one,
this works.
I output this in my jsx code with the single curly braces
because this here of course is not jsx, it's an array but it's an array full of jsx and if I save
this, it outputs hi and this works. We get an error or a warning which you can ignore for now but this works
in general. Now since this works with hardcoded data, we can also output our array of goals, so we can
output props goals here
but the problem is that props goals is in the end an array of Javascript objects, not an array of jsx
code.
So we try to output this here, it will fail,
it tells you that objects are not valid as React child or as React children.
So in the end we can't output plain vanilla Javascript objects in jsx,
instead we need to map every object into a jsx equivalent, so into a renderable element.
So here we want to map every object into a list item in the end.
So on props goals which is an array, we can call the map method,
that's a default vanilla Javascript method that exists on any array.
The map method takes a function,
here I'll pass in an arrow function which is executed on every element of the array you call map on and
then this function here will return a transformed version of that element in the original array and
overall map will then return a new array full of these transformed data pieces. So this function will therefore
receive the existing element here,
so every goal in our goals array and then returns a new element.
So in this new array returned by map, I want to have a bunch of jsx elements,
so here I will just return a list item which is jsx of course and in that list item, I want to output
my goal text.
Now goal here is that Javascript object we have in the original array because this function runs on
every element in the original array and gives you the object in the original array or the data piece
in the original array as an argument,
so goal here is that object which looks like this here. So I'm only interested in the text here
and again, we can output the text by outputting a Javascript expression here,
hence we need to curly braces in our jsx code here and we have goal.text here, my expression is
that I access the text property on the goal object.
So now what happens here is I map my array of plain Javascript objects to an array of jsx elements
and such an array of jsx elements is renderable as you learned.
So now if I save this, you see this outputs my course goals again.
Now we also get a warning regarding a unique key, that is related to how React re-renders the DOM and
that it wants to do this efficiently,
you learned more about that in my React - The Complete Guide course and therefore whenever you output lists
of data with this technique, you have to add a special prop to every item you are rendering in that list,
in this case to every list item
and that's the key prop. That is a proper React itself understands
and here I want to output goal ID, again
wrapped in curly braces because this is a regular Javascript expression.
So now with that, we don't get the warning and we get our course goals,
so this is how we output a list of data. With that,
this is looking pretty good,
we're outputting our list of data.
Why don't we now work on adding some functionality that allows us to add our own goals?
That would be a nice next step.