Now to output our list of goals, here in the view, I want to simply output a couple of text components
for now where I simply print my goal and to do that, we can enter a dynamic expression here with single
opening and closing curly braces
and now we refer to course goals, which is this variable we got here with array destructuring. Course
goals is our array of goals
and now just as in normal React which is a differentiation I don't really like because we are using
normal React here in the end,
so just like you know it from React for web projects, you can now map this array of data into an array
of components with the map method which is a normal Javascript method. The map method takes a function
which executes on every item
in the array,
so here we get our goal and it then has to return a new component here. Again I'll use this inline arrow
function syntax where instead of having curly braces and then returning something, I omit the curly
braces and I omit the return statement, this is valid Javascript syntax,
this will also return whatever I enter here.
What I want to return is a text component,
so this text component we imported from React Native and with this, we can now output our goal here because
a goal in course goals will just be a text because what we add to course goals is the entered goal and
the entered goal is what we get from text input and that's just text.
So here, we're now just outputting some text and I'm mapping all my course goals into text components
which will be output in this view here. And with that if we save this, we should already be able to start
adding some goals,
so learn React Native is one thing I can enter here, hit add and here it is, learn it for real and we get
this as well
and if you also want to make some pancakes, you can do that as well and of course, this also works
on iOS, learn React Native for real
and of course, I still want to make some pancakes.
So this is working and this is how we can output a simple, a very trivial list of items here.
Now of course, these items look rather boring though, so maybe we can apply some styling there to make
them look better. Before we do that though,
please note that we have an error here in our terminal.
Now our app clearly works but the error we're getting here is that each child in a list should have
a unique key prop and that's a normal React rule, nothing React Native specific.
Indeed, you should always, when mapping this to a list of widgets, assign a key here so that React is able
to efficiently update this list behind the scenes if it needs to. You do this by adding a key prop here
and then the key should be some unique identifier,
for now let's go with the goal itself which isn't strictly unique,
you could enter the same goal with the same text twice which would give you an error
but for now let's assume you're not doing that,
therefore we can use goal as a key and if we do that, we're getting rid of that warning.
If I now learned React Native, I can add this without an error.
Again if I add the same text twice, then technically I don't even get an error here but this would be
wrong,
here it is, here is the error because I got two children with the same key.
So, for now we'll just assume that you don't do that though,
that's the normal key rule you have in normal React as well.
So let's simply assume you don't enter the same goal twice and let's continue with styling these items
because right now, they're not looking too exciting.