Now that are error messages, we'll get error messages during development and reading them is a super important
thing to do because they really can help us find out what's wrong.
Now let's move on to errors which don't necessarily throw error messages or where you need to dig a
bit deeper to find the root cause. Now let's for example say that in app.js, we wanted to find out
if we were really deleting the right goal here. To find out whether that's the case, we can console log
our goal ID here, maybe add some info text like to be deleted in front of this, so that we get some
information about what's getting printed here and then we have our list of course goals here,
so that's the list without the item being deleted
and then we would want to see it after that being deleted
but the way this set state function here works in the end, the way React updates the state,
just printing the course goals again in this line won't give us the already updated course goals, instead
that will only be updated in the next render cycle.
So we'll not see our course goals there but that's no problem,
we just need to log this at a different place, we log this right here in our component. There we log
the course goals and this entire component will be re-rendered when we update our course goals with
this line,
so this will rerun, so we can maybe just also add a little console log, re-rendering component, so that
we know that the course goal list we're printing after this one is the list after every re-render cycle
whereas the course goal list we're printing after this to be deleted line is the course goal list before
we deleted a course goal and now we added some console log statements that allow us to dive into
the flow of our code. With that if I save this, the app restarts and we already see re-rendering component
which makes sense, it's getting rendered the first time and we see we have an empty array which also makes
sense because we haven't added anything.
Now let's add a new goal, maybe here on Android, finish the course. If we do that, we see the component
re-renders, makes sense because we added something and then most importantly for the other re-rendering
where we added an item, we see that item here in the array, we also see the ID of that item and the value
which looks all right. Now let's add another item maybe, learn React Native and add this and we see this here,
we just now see that it's an array with two items
if we expand this here. So we're now able to look into our code and now let's delete an item by clicking
on it and let's delete the finish the course item with the ID 0.818 and so on.
So if I click finish the course, you see it gets removed,
so it seems to work correctly and our console log confirms this,
we are re-rendering, we're re-rendering our array with this ID only, so with the other item which we
didn't delete and up there, we see to be deleted is this ID here,
this log is coming from this line before we deleted it,
so it's still included but for the next re-render cycle, we see that this ID here is indeed not included
anymore.
Of course, that's a bit of a made up example,
we of course see that that's behaving correctly here but simply imagine you have a more complex flow
in your code you want to debug, then such console log statements can really help you understand how your
code is running, how often it's running and if the correct values are getting used.
So console log statements can really be helpful if you dump them into your code, just don't forget
to also remove them eventually so that you don't crowd your code with tons of console log statements.