Gene Higgins16,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
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.
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
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?