lj litter

[elle-johnnie]

Litter Patrol

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
How are events / event handlers and this.state connected?	The constructor is used to initialize state which can then be handled via event handler functions.
What are two ways to do "dynamic styling" with React? When should they be used?	Inline className setting can be implemented via ternary operations and arrow functions can be used prior to the render method to establish conditional styling.
Much like Rails works with the HTTP request->response cycle, React works with the browser's input->output cycle. Describe React's cycle from receiving user input to outputting different page content.	React creates a copy of the DOM as a virtual DOM as the user interacts with the DOM, React updates the virtual DOM compares that copy to the DOM and updates html elements as necessary.
Compare how React and Rails' views differ. Given different circumstances, these systems have different goals. How does this impact on their design and how we are supposed to use them?	Rails views are not as dynamically updatable as the react view. My understanding is that React's implementation of the virtual DOM allows faster and more responsive design and web interactions.
What was a challenge you were able to overcome on this assignment?	I struggled through most of this project, React implementation is not 'clicking' for me for some reason. When running my app and debugging I found that sometimes my click events would get registered and get logged, but then would stop for some reason. If I reset everything things would work again for a few seconds and then stop again. This made it really hard to figure out how to proceed through much of the project. As it stands click events are still not getting regularly recognized for some reason. I'll seek help on this.

CS Fundamentals Questions

Question	Answer
Consider the code on the first few lines of App.render (it starts with this.state.items.map). What is the Big-O time complexity of this code, where n is the number of active game items?	My guess is O(n) since map will need to iterate over all elements to generate and array of all objects.
What part of React might benefit most from the use of specific data structure and algorithms?	Updates to the DOM and comparing the diff between the DOM and virtual DOM
Consider what happens when React processes a state change from setState -- it must re-render all of the components that now have different content because of that change. What kind of data structure are the components in, and what sort of algorithms would be appropriate for React's code to "traverse" those components? Speculate wildly about what the Big-O time complexity of that code might be.
Earlier this week I read somewhere that the virtual DOM is a tree data structure where each html element is a node so when comparing the DOM against the vDOM React would likely want to use an algorithm that can efficiently find differences between the two to 'know' where to make specific DOM changes. In React docs they apparently use a diffing algorithm that has an O(n) runtime.

[CheezItMan]

Litter Patrol

What We're Looking For

Feature	Feedback
Core Requirements
Git hygiene	Good number of commits, although some of the commit messages didn't make sense.
Comprehension questions	Check, styling can also be done inline.
Functionality
Clicking on litter or nature shows a check or X respectively	Nope see my inline comments
Clicking on litter appropriately updates the score	Nope see my inline comments
Under the Hood
JavaScript is well-organized and easy to read	Relatively easy to read, you've got most of the pieces here.
Functions are named appropriately	Check
Callback functions are passed to components appropriately	They are passed in appropriately, but you are calling the callback no matter what type of GameItem it is.
Overall	So it's not working and I have a few suggestions to get started. First put the onclick on the div in GameItem. You are also checking "type" in App, but App doesn't have a type property. See my inline comments and/or we can sit down and look at this.

[CheezItMan]

This property doesn't exist on the App component. You should instead be checking to see if the GameItem is litter.

[CheezItMan]

You should also only call the callback the 1st time the item is clicked on and if it's litter.

[CheezItMan]

I suggest moving the onClick into the `div.