This week consisted of finishing step 9 implementation, writing more of my Final Report, and working on Step 10.

Step 9 Continued

Fix:

• Updated Button class:

  class Button extends React.Component{
  state = {
    hover: false
  }
  clickHandler(gridOutput){
    changeGrid(gridOutput)
  }
  render(){
    return(
      <View>
        <VrButton
          style = {this.state.hover ? styles.hover : styles.button}
          onEnter = {() => this.setState({hover: true})}
          onExit = {() => this.setState({hover: false})}
          onClick = {() => this.clickHandler(this.props.gridOutput)}>
          <Text
            style = {styles.code_display}
            >
              {this.props.code}
          </Text>
        </VrButton>
      </View>
    );
  }
  }
  

  Step 10: Update memory panel to be in sync with snippets

  How do I connect the buttons from CodePanel to the GridPanel’s grid?

Attempts:

• Created a changeGrid function that would update the state of the codePanel and update the gridPanel accordingly by changing the output property.
• Using the connect function from store.js, I connected the CodePanel and the GridPanel so any update to the CodePanel will change the state of GridPanel.
• Used the connect function to connect GridArray so that gridOutput could be accessed.

Error:

• Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Fix:

• setState was moved to onEnter/onExit
• Fixed spelling typo in import changeGrid

Why are gridOutput and changeGrid undefined?

Error:

• TypeError: Cannot read property ‘0’ of undefined
• changeGrid is not defined

Fixes:

• gridOutput had to be included in the GridArray call: `<GridArray gridOutput = {this.props.gridOutput}/>
  • Not really a fix because gridOutput is still undefined.
  • Created a const ConnectedGridArray which connects GridArray to GridPanel and CodePanel

---

Completed Tasks:

• Step 9
• Completed Week 8 & 9 Posts
• Read Research Papers

Unfinished Tasks:

• Continue Supplemental Courses
• Continue/ Edit Sections of Final Report
• Debug Magnifying Glass
• Steps 10 & 11