JavaScript React Basics (retired) Designing Data Flow Adding Players to the Scoreboard

Gene Higgins
Gene Higgins
16,188 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.

+1. Not clear at all.

1 Answer

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?