Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (2018) Understanding State Remove Items From State

dodders
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
dodders
Python Development Techdegree Graduate 38,679 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?

3 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,679 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.

Victor Stanciu
seal-mask
.a{fill-rule:evenodd;}techdegree
Victor Stanciu
Full Stack JavaScript Techdegree Student 11,196 Points

If the handleRemovePlayer would have been a method of the Player would-be class, I don't see how the players array (which is used by the App to render all players to the page) could be modified, as the Player would-be class is a child of the App class.

Hopefully I did not misunderstood the basics of React.