Rock, Paper, Scissors using React, CSS3

Community feedback

• 

  Solomon Ekrebe•610

  @krebeDevPosted over 4 years ago

  I appreciate your feedback @mattstuddert.

  As a beginner, working with React was quite tough, but exciting nonetheless.

  • I didn't know assigning e.currentTarget.id to userChoice.name will directly mutate the userChoice object in state, because I started off by cloning userChoice and houseChoice like so:

  handlePick = (e) => {
      const userChoice = {...this.state.userChoice};
      const houseChoice = {...this.state.houseChoice};
  
      // Other code lines go here
  }
  
  

  Do I have to clone/setState for each key : value pair in this instance?

  I've started learning about hooks, and definitely will apply them once I get the hang of it.

  • On the identical components, I'll refactor my code as you suggested. I just noticed the same repetitive pattern in my Starter component too. I'll fix them.

  0

  ---

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @krebeDev hey Solomon. As you said because you're cloning the state objects you're not directly mutating state. But what I'm saying is that you don't need to do this at all. Instead, you can use the this.setState() method to update the state of the component. I'd recommend taking a look into the React docs for the setState method as it will clean up your code. Also, once you do learn about hooks it will change the way you approach your component architecture for sure.

  0

  

  Solomon Ekrebe•610

  @krebeDevPosted over 4 years ago

  Hi @mattstuddert. Thanks again. I get your point now. I'm still on the React journey, so yeah, I'll take a deep look at the docs.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @krebeDev no problem! The docs are great and explain the concepts really well. I look forward to seeing your next React project!

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Nice work, Solomon! How did you get on using React? Did you find it OK to work with? Overall, you've done a really good job. The game looks great and functions exactly as the brief outlined. There are a couple of small pointers I'd make after looking at your code:

  • You're mutating assigning variables from state and then mutating those objects, which goes against React's typically paradigm of using immutable state. For example, in the handlePick method you've got lines like userChoice.name = e.currentTarget.id; whereas you could do setState({ userChoice: { name: e.currentTarget.id, ...this.state.userChoice } }). This would update the name property on the userChoice state object while also preserving the other property values. I'd also recommend reading up on hooks for doing this kind of logic in functional components. Hooks can really clean up the React code you write quite considerably.
  • You've got 3 separate, but almost identical components for the Rock, Paper, and Scissors choices. This would be a perfect opportunity to refactor these into one single component that you can pass props into to change the choice between the 3 of them.

  Keep up the great work and let me know if you have any questions 👍

  0