All language subtitles for 003 Analyzing Code Flow & Warnings_en

So with that error solved

the application is running again.

Now I can start adding goals again

for example, Master React.

And also let's say,

Check out other courses on React.

Now I added these goals

and now I actually also have

another error in this application.

Another error, which won't lead

to a compilation error here

and which won't show up here

on the main screen though.

If I delete my newly added

Check out other courses on React goal,

you see it's there.

Actually the other goal I added was deleted

even though I clearly clicked on

the Checkout other courses on React goal.

So since that worked before

in the other course modules

there has to be something in my code

that is causing this error.

So what could be the problem here?

I'm not getting an error message here on the screen

not here in the terminal either.

So how can we now solve such error?

Well, there are a couple of things you can do.

A couple of steps that are worth a try.

Let's first of all go to the place

where we have that deletion logic.

We got our course goal list

and there we have on the lead

where we trigger props on the lead item.

If you go into a course goal

item we see on the lead

is in the end triggered when we click on that.

I don't really see an error here

with our forwarding that ID in course goal list.

We just pass on that event in the end to

on the lead item, on the course goal list component.

So if you go to the app component

where this ultimately is being rendered,

we see that the delete item handler is executed

and there we get the goal ID

and we delete a goal.

Now a goal was deleted as we saw just the wrong one.

So did the leash logic in general seems to work,

but maybe the ID is wrong.

So maybe we should go to the place

where the IDs are generated and assigned.

And that's here in the add Goal Handler.

And here indeed, I changed something.

I set my ID to a hard-coded string.

Previously here I used math random

to derive a pseudo unique ID.

Now with the hard-coded string

I introduced a logical error here.

The error is that I assigned the same ID to all goals.

So therefore they're no longer distinguishable by ID.

And hence, if we click on a goal

the first goal that has the ID

which is found in the goals array, is deleted.

And that's always the first goal I ever added.

That's why not this goal was deleted

but the goal which I added before.

So that's a logical mistake

and I was able to narrow it down

by going through that complete chain of events.

Click on a goal, we triggered a deletion handler

and I had to look at all those steps

to narrow down the problem

to finally find this problem here.

And this is a perfectly fine way of trying to solve this.

Now here's another thing that could help you.

If I add goals again.

Check out other courses on React

and Master React.

If I do that

and I again click on the first goal

and the second one is deleted.

Let's now open up the developer tools here

And there, let's have a look at the console,

the JavaScript development and debugging console.

Here the browser gives us any

logging messages we added to our code

and also some warnings and errors

that are thrown by the library

which don't crash the whole application necessarily.

And here we see that we got a warning actually.

And we get that warning already when we add a goal.

The warning that I get here is in the end that

React encountered two children with the same key.

So two children with the same key

were found here with the key goal1.

And this is implicitly related to our deletion problem.

Now, again, we're not getting that

warning when I delete something.

We already get that warning when I add a new goal.

But this already tells us that

we have some error in our code.

Because if we got two children with the same ID,

with the same key in the end,

then we seem to have an error in our code

where we assigned the same ID multiple times,

which indeed is the problem we have.

And React of course also tells you

where the problem occurs.

This here is an error related to our list

because that key concept as learned

in the lists and conditional module is related to lists.

But it is related to the list here

in the unordered list in the

core skill list component, line eight.

So again, you get a pretty clear idea

of where this warning in this case is coming from,

and you can then have a look at the code there

and find out why that problem occurs.

And if you then work your way back

to the place where goals are added

which is the place where the IDs are added

which in turn are the things that are used as keys here

we do use the goal ID as a key.

Well then you would be able to come back

to the place where the hard-coded goal1 ID is.

Because we even see that goal1

is the problem here in the warning.

So that's another way how you

might've solved this problem.

But you can also use another approach.

You can use the debugger built into the browser.

You can use break points.