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 (retired) Designing Data Flow Adding Players to the Scoreboard

Posted by Gene Higgins
Gene Higgins
16,582 Points

Confused about why props are placed where they are

I stepped away from this for a week and now feel lost, but I suspect I would have felt that way anyway.

I'm not getting the placement of props. E.g. onScoreChange is declared in Player.propTypes, but the code itself is in Application. AddPlayerForm declares the onAdd function in propTypes, but never defines it, yet it's implemented in the Application render method. I do get that the Player component is within the Application class, but still, makes my head spin.

Can someone help me think this through? I.e., I know I have to implement some behavior; how do you decide what goes where? What's the starting point? What questions do I need to ask myself?

That's definitely the hardest thing at this point.

romaug
romaug
16,527 Points

+1. Not clear at all.

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

This was the part he mentioned about consolidating the logic and state management at the highest level (Application). This makes sense because you're always changing the top level array of players, and then each of the child components just needs to know what data to render/display.

Each child component also needs to know what to do when someone clicks something or otherwise interacts with something in the component. But again. because the changes happen at a higher level, it instead just triggers a function on the Application component so it can make the required changes.

Basically, put the state and any functions to modify it at the level above any components that require that data to render. So if the Player component needs a name, score, etc. then store all that one level up so you can pass it down to multiple children of the same kind.

Also, the more components you can implement as 'dumb' or stateless functional components, the better, for performance reasons.

Does this help at all?