Last bug: React props are changing

https://codepen.io/JShinigami/pen/BZwKze
My code works as expected for the exercise “Build a Roguelike Dungeon Crawler Game”.

There is only one last bug:
When I lose or win the game, a popup displays a message and a button with the opportunity to restart the game.
I have decreased the healt to 0, so if I then let the hero (black field) run into an enemy (dark or light red), the pupup will be displayed and I can restart the game.
When I do so, I can see, that the gameboard was not reset, as expected.

In more detail:

  1. I have created a two dimensional array in line 1 called “gameboardOriginal”
  2. This array is passed to the topmost component via a prop called “gameboard” in ine 357
  3. This prop is then used to store it in the state, once for the current game as “this.state.gameboard” and once for the restart of the game as “this.state.gameboardEmpty” in line 99 and 100
  4. In line 315, 316 and 317 I am logging “gameboardOriginal”, “this.state.gameboard” and “this.state.gameboardEmpty”, it is within the render function of the topmost component
  5. This way I see, that “gameboardOriginal” and “this.state.gameboardEmpty” are also changing, although I only work with “this.state.gameboard”

How can this be?

Thank you in advance.

On restart line 145 you set gameboard to “test”. What is “test”?

Note - you can use the gitter chat for this sort of question too.

I haven’t looked into the details yet, but at first glance… it looks like the props.gameBoard is turned into a state.gameboard in the Game constructor function. That could be your problem right there.

When you do something like that and later change props.gameboard, the constructor function does not run again, so your state.gameboard does not change.
You should either keep your prop as a prop (which is good practice if your child component does not need to change gameboard) or use componentWillReceiveProps(nextProps)… to force it to change state.gameboard when the prop changes.

Once again, I could be mis-reading things. If that’s not what is going on, I will take a closer look at it.

@JohnnyBizzel: You are right, I forgot to delete this “test” variable before posting the link. It was only for debugging purposes. Thank you for reminding me of the chat existance, I only had the forum in mind.

@Marie000: I am not sure if this is the problem. My parent component (=the game itself) only receives the props (=the empty gameboard/fields) once, the props will not change anymore from outside the component. I would appreciate it, if you could take a closer look. Please be aware, that I have changed the code a little bit since my last post (for debugging purposes). Therefore my “in more detail” description does not reflect the current lines anymore, also some variable names changed. The bug itself - gameboard is not reset, after losing the game and pressing the restart button - still exists. Thank you in advance.

1 Like