This course will be retired on April 12, 2021.
In this challenge, you're going to use the skills learned in this course to add a new feature to the Scoreboard application, using React and Redux.
- In the 'actiontypes/player.js' file, add and export a new action for
- Define a reducer that will interpret the
SELECT_PLAYERaction and produce a new state for the playerDetail data
- In 'reducers/player.js', in the
switchblock, set the newly added player’s
createdvalue to the current date
- Add a
switchcase for the new
SELECT_PLAYERaction type. You'll need to set the
selectedPlayerIndexto the value passed in -- for example, with
- In the
switchcase, set the player's
updatedvalue to the current date
- In 'actions/player.js', create the action creator for the
selectPlayeraction. The new action creator should take an index argument and generate an action object with a type of
SELECT_PLAYERand provide the index as the action metadata.
- In the Scoreboard component, don't forget to update the
mapStateToPropsmethod to account for the
selectedPlayerIndexand, in the
- Add a new bound action creator for the
- Use the index to pull out just the
playersarray if the
selectedPlayerIndexis not -1 (a conditional would work great for this)
- Pass the
selectPlayerbound action creator to the player component and, in the return statement, the prop provided to
PlayerDetailshould be the
- In the new
PlayerDetailcomponent, use the data being passed via the
selectedPlayerprop to display the name, score, created, and updated data, if the
selectedPlayerprop is being passed. Otherwise, it should display the paragraph "Click on a player to see more details".
- When you click on a player, it should display the details for that player in the PlayerDetail component. In the Player component, you'll devise a way to detect an
onClickfor a player that invokes the
selectPlayerbound action creator
- The function you write should provide the index of the player as an argument -- similar to the
Don't forget to update your prop validation for
selectedPlayerIndex in the Scoreboard component and
selectPlayer the Player component, and make sure you also have prop validation on the
selectedPlayer info coming into the new PlayerDetail component.
You need to sign up for Treehouse in order to download course files.Sign up