Hangman game [React]

1

Hey folks,
I stumbled upon a problem with my Hangman Game.

  • I’ve got user input setup
  • I filter out letters that are not in the current word

The problems are:

  • how to update dynamically generated components (letters of the current word) to show up on screen?
    Ex: I click letter a (the word is “basic”) and class “visible” is added to the exact letter

General feedback about the app and the concept of work would be much appreciated.
Thanks in advance!

2

You would have to pass down to the Word component a list of used letters (the same you pass to the used letter components, I guess). Then when you do the map function inside your Word component, you would need to introduce a condition: if the letter is part of the used letter array, display the letter, else display an empty box.

If it were me, I would create a letter-box component that takes a prop of “letter-displayed”. If the letter has not been picked yet, “letter-displayed”="", else you pass in the actual letter. Of you could have two props: visible(true or false) and letter(letter from the word)

But either way, your Word component is missing the information about what letters have been chosen so far. Once it has that, it’s just a matter of having some sort of if statement to change the display based on that list.

I can look at it more later if you want. Right now I have to leave to catch my bus.

1 Like
3

thanks, that’s very helpful! :slight_smile: one step at a time. I will update mz progress here :wink:

1 Like
4

I ran into another problem, I add eventlistener that is listening for keypress, and I don’t want it to trigger any mouse events, how do I solve it?