JavaScript React Basics Understanding State Remove Items From State

dodders
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
dodders
Python Development Techdegree Graduate 38,259 Points

Why does Guil create the handleRemovePlayer under App and not Player?

I'm wondering why the App class is the right place for the handleRemovePlayer function?

Would it not make more sense for the Player component to be a class component, and create the function under there instead? I feel like this would lend itself better to the separation of concerns principle.

Am I correct that this would be a better way to do it, and Guil was just showing us that we can pass a function between components? Or was this really the preferred approach?

2 Answers

Hey, dodders :smiley:

You have excellent attention to detail! From a design standpoint, it might be 'cleaner' to have that function as a method of Player, if Player were a class. As far as why Guil chose to do it this way, I can't answer for them.

One reason for this might be due to the small functionality for a 'player': removing them; there aren't any other operations regarding a 'player'. With this possible reason in mind, it might make sense to make a Player class if there were many player-related operations, or at least two, where each operation (function) would be a method of that Player class, supporting the SOC principle.

Personally, I would have components in separate files and have Player as its own class with handleRemovePlayer as its method. All in all, this course is for the basics of react, so I think not doing this in the course might just help not distract the learner.

I hope this helps!

dodders
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
dodders
Python Development Techdegree Graduate 38,259 Points

Having re-watched the videos, I think the reason for this is because the list of Players is part of the App state. A function inside the child component cannot access the state of the parent so it has to be done via the function which belongs to App and is passed as a property.