Conditional View does not properly update when the state condition changes

[schenkty]

• syr-cli version: latest
• syr version: 1.7.2

Relevant code.

import { Component, Render, View, Text, Button } from '../../index';

import { Styles } from './style';

class BBApp extends Component {
  constructor() {
    super();
    this.state.paymentOpen = false;
  }

  render() {
    console.log('render executed. payment status: ', this.state.paymentOpen);
    if (this.state.paymentOpen === true) {
      return this.CloseView()
    } else {
      return this.ShowView()
    }
  }

  CloseView() {
   return <View style={Styles.payView}>
      <Button
        onPress={() => {
          this.closePayment();
        }}
        style={Styles.closeButton}>
        Close
      </Button>
    </View>;
  }

  ShowView() {
    return <View style={Styles.mainView}>
      <Button
        onPress={() => {
          this.showPayment();
        }}
        style={Styles.payButton}>
        Pay
      </Button>
    </View>;
  }

  showPayment() {
    console.log('show payment');
    this.setState({
      paymentOpen: true,
    });
  }

  closePayment() {
    console.log('hide payment');
    this.setState({
      paymentOpen: false,
    });
  }
}

Render(BBApp);

What you did:
Pressed the "Pay" Button

What happened:
Browser console reflected that the this.state.paymentOpen updated properly but the view does not change accordingly.

On Safari, I don't see any error but on Google Chrome, I have the following error:

Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at raster.syncState (raster.js:144)
    at raster.update (raster.js:68)
    at raster.parseAST (raster.js:17)
    at domraster.sendMessage (index.js:25)
    at domraster.render (index.js:20)
    at RasterManager.render (rastermanager.js:30)
    at BBApp.Component.setState (component.js:38)
    at BBApp.showPayment (pay.js:46)
    at Button.onPress (pay.js:36)
    at bubbleEvent (events.js:105)

[dmikey]

Thanks for opening this, we'll get this fixed right away!