Challening parts
A lot of states. I have an overall state of all teams present at the beginning fo the tournament. Then the user has to choose one of the two teams in each match-up. The chosen teams state transfers to the next stage of the bracket. Finding the ideal type to keep the teams in for all of the future manipulations is important. I want to avoid having 60 handleClick functions.
Challenge 1: Question: I am considering the logic for next phase of the bracket. Lets say I selected a team in each pair. Then, all these selected teams move onto the next stage. And so on until the final where last two teams meet. These are options I came up with: 1. Add selected2,selected3 and so on to each team object in teams and switch those around. Problem with it is that handleClick will become huge with all the state changes of different selected. 2. Keep the handleClick the same, but make a dynamic const teams. For example, if Brazil and Iceland are selected, we generate a new array with two objects that are copies of Brazil and Iceland objects. This new array will have selected at false again. Issues here: once i select a team to go to the next phase, i add that team to the new array. What if i ended up changing that team, that means the object in the new array needs to be adjusted/rewritten?
Things I learned here
One must pass the function to be executed later into onClick, not call the function immediately.