React-native (ES5) to (ES6)

Question

This ES6 is giving some problems in React native. I want to write the code in pure ES6 but writing the part is giving errors.

ES5 code

renderScene: function (route, navigator) {
       var Component = route.component;
       return (
           <Component openModal={() => this.setState({modal: true})}/>
       )
   },

Where the ES6 is:

renderScene(route, navigator) {
    var Component = route.component;
    return (
        <Component openModal={() => this.setState({modal: true})  }/>
    )
}

I am getting this error:

I have tried to add bind(this) but it doesnt work.

Can anyone please help? Thx in advance

EDIT: Added full class code

class Navigation extends Component {
    constructor(props) {
        super(props)
        this.state = {
            modal: false,
        }
    }

    renderScene(route, navigator) {
        var Component = route.component;
        return (
            <Component openModal={() => this.setState({modal: true})  }/>
        )
    }

    goToOtherRoute() {
        //this.refs.navigator.push({newRoute})
    }

    render() {
        return (
            <View style={styles.container}>
                <Navigator
                    ref="navigator"
                    initialRoute={RouteStack.app}
                    renderScene={this.renderScene}
                />
                {this.state.modal ? <Basket goToOtherRoute={this.goToOtherRoute} closeModal={() => this.setState({modal: false}) }/> : null }
            </View>
        );
    }
}

did you change from `React.createClass` to `class extends Component` ? — azium, Apr 21 '16 at 17:31
I'm having [a similar problem](http://stackoverflow.com/questions/36777607/how-to-access-this-inside-a-renderrow-of-a-listview). It seems that `this` is not the Navigation instance. You can use a console.log(this) inside `render` and compare it to a console.log(this) inside `renderScene` — xabitrigo, Apr 21 '16 at 19:30

score 4 · Accepted Answer · edited May 23 '17 at 11:52

4

Declare renderScene like this:

renderScene = (route, navigator) => {
  //code
}

There are other options, I've written them down here.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 21 '16 at 20:16

xabitrigo

1,341
11
24

Wow this worked. Thx. Have read your post at the other link. How come the two other options doesnt work, and will you please explain what it means when you declare the method like this – MDK Apr 21 '16 at 20:31
1

The three options should work (I've just tested the three on my project). As far as I know the arrow syntax is [Babel](https://babeljs.io/) at work. The main difference is that Babel seems to bind `this` to the called function whereas in the two other methods you have to do the binding yourself. Using `renderScene={this.renderScene.bind(this)}` inside `render()` or writing `this.renderScene = this.renderScene.bind(this)` after `super(props)` should also work. – xabitrigo Apr 21 '16 at 20:40
I actually does. The thing is that i was bind(this) the wrong place so thats why it didnt work. Have one last question. Will you please explain the {this.state.modal ? – MDK Apr 22 '16 at 04:09
That is an "shorthand if". The syntax is `condition ? responseIfTrue : responseIfFalse`. It's the same as `if (condition) {responseIfTrue} else {responseIfFalse}`. It is only recommended for short sentences as it's less legible. Example: `var color = isAllowed(someStuff) ? 'green' : 'red'` – xabitrigo Apr 22 '16 at 09:27
Nice. And at last, the null and the end means – MDK Apr 22 '16 at 15:17
That's the else part. If `this.state.modal` evaluates to false then the whole line is `{null}` – xabitrigo Apr 22 '16 at 15:19

score 0 · Answer 2 · answered Apr 21 '16 at 19:20

Of course here it is: And yes to the extends Component

class Navigation extends Component {
    constructor(props) {
        super(props)
        this.state = {
            modal: false,
        }
    }

    renderScene(route, navigator) {
        var Component = route.component;
        return (
            <Component openModal={() => this.setState({modal: true})  }/>
        )
    }

    goToOtherRoute() {
        //this.refs.navigator.push({newRoute})
    }

    render() {
        return (
            <View style={styles.container}>
                <Navigator
                    ref="navigator"
                    initialRoute={RouteStack.app}
                    renderScene={this.renderScene}
                />
                {this.state.modal ? <Basket goToOtherRoute={this.goToOtherRoute} closeModal={() => this.setState({modal: false}) }/> : null }
            </View>
        );
    }
}

React-native (ES5) to (ES6)

2 Answers2