I'm stuck on the Game of Life! :(

I'm stuck on the Game of Life! :(
0

#1

I think my main issue is related to the Game_Board container, and setting an interval for the game rules to be applied every 500 milliseconds.

Project Link - http://codepen.io/friscomiranda/pen/bwdRoz

Any help is much appreciated! I’ve been working on this for a couple weeks on and off now, and this is the toughest roadblock I’ve hit.

When you open the page the game should automatically start, but it just generates a random board, and doesn’t do anything. You can click any of the buttons and they work how they are supposed to right now, but the game rules aren’t being applied.

I keep getting these two errors:

  • Uncaught TypeError: Cannot read property ‘status’ of undefined
  • Uncaught SyntaxError: Unexpected identifier

The status mentioned above is found in the render function for Game_Board.

I’d love any help or feedback on how I could resolve this issue and get this thing working!


#2

That’s an impressive looking UI.

I tried to take a look, but debugging through codepen is extremely challenging, to say the least. It transpiles to ES5 and looking at the output in the Opera debugger is neigh on useless.

I’ve been developing all the React challenges using react-slingshot on my laptop. It provides excellent debugging output. Another option is react-create-app.

I recognize that may not be a practical approach for you and likewise doesn’t answer your immediate question. I wish I could help with that, but I am not familiar enough with ES5 transpiled output to venture a guess as to what is wrong.

You could try Change View > Debug Mode in Codepen and then open your browser’s debugger. With debugger statements you may be able to better determine what is wrong. Based on the error, we can deduce that your column object is undefined at the point in time when you try to read the ‘status’ property.

I would try setting a breakpoint and see what comes up.


#3

I’m currently working on my Game of Life project so I decided to take a look at yours.

As @jboxman said it is very hard to debug React without tools. I managed to locate two errors: one in setInterval definition (it should have function inside it) and one in render (it should have returns from both maps).

I manage to identify that after first generation there are undefined values in your grid, that’s the reason you get the status error messages.

I have suspicion that problem is with your reducers. Reducers must be pure functions, and it looks like yours aren’t.

I think when I finish my project I’ll try to debug yours if you you won’t be able to find the bug yourself :wink:


#4

@jboxman and @jenovs thanks so much! I appreciate your responses, and your time giving this a look.

This week at work we’re doing our annual customer conference which means it’s been super busy, so I haven’t had much time to work on this. But I’ve certainly been thinking about it, and both of your responses are very helpful!

I’ll definitely check out those tools you mentioned @jboxman, and I’ve already started copying this code into another app I started with express, so it’ll be easier to debug.

I’m gonna try to get some solid work in on this tomorrow evening and @jenovs hopefully I can beat you to debugging this! :slight_smile:

If I do manage to find the issue(s), I’ll let ya know here


#5

Done :tada:

Not posting the solution here in case you want to find it yourself, but if you are curious I added comments in the code. You can search them by jenovs (hint: there are two).


#6

Thanks so much @jenovs!! I began working on it, but your two comments helped a ton. I think it would’ve taken me a while to figure out those two issues.

I finished it up by tying the play function to the buttons, now I’m done with it!

I really appreciate your help :slight_smile:

For anyone who is curious, here is the finished product