Some strange rendering behavior.

[MaxMillington]

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

Relevant code.

class MyComponent extends Component {
  constructor(props) {
    super(props)

    this.state = { data: null }
  }

  componentDidMount() {
    this.getData()
  }

  getData() {
    console.log('getting data', fakeData.data)
    this.setState({ data: fakeData.data })
  }

  render() {
    console.log('hey rendering', this.state.data)
    if (!this.state.data) {
      return (
        <View style={styles.view}>
          <Text style={styles.text}>There aint no data in this app!</Text>
        </View>
      );
    }

    return (
      <View style={styles.view}>
        <Text style={styles.text}>Welcome to the sweet shoplist app with data!</Text>
      </View>
    );
  }
}

What you did:

changed the code to:

class MyComponent extends Component {
  constructor(props) {
    super(props)

    this.state = { data: null }
  }

  componentDidMount() {
    this.getData()
  }

  getData() {
    console.log('getting data', fakeData.data)
    this.setState({ data: fakeData.data })
  }

  render() {
    console.log('hey rendering', this.state.data)
    return (
      <View style={styles.view}>
        <Text style={styles.text}>{
          this.state.data ? 'Welcome to the sweet shoplist app with data!' : 'No Data Here!'
        }</Text>
      </View>
    );
  }
}

What happened: The first chunk of code gets an update not found error from Syr. Meaning that the when the app gets data and runs SetState, it does not rerender. The second chunk does rerender, but produces the following:

Problem description:

Would be great if these worked!

[dmikey]

Thanks, will take a look at these right away!