Backbone react component with react-router sample

Questionnaire

let QuestionnaireConsumeView = React.createClass({
    mixins: [BackboneReactMixin, State, Navigation],
    getInitialState() {
        console.log('initialstate');
        return {};
    },
    componentWillReceiveProps(nextProps) {
        console.log('coponente will receive props');
        this.overrideModel();
    },
    overrideModel() {
        console.log('override ');
        console.log('binding model');
        return data.questionnaires.first();
    },
    getRoomAreas() {
        let roomAreas = [];
        this.props.model.get('questions')
            .forEach(((question)=> roomAreas.push(question.roomArea)));
        return _.uniq(roomAreas);
    },
    currentRoomArea() {
        let ra = this.getQuery().roomArea;
        return ra == undefined ? this.getRoomAreas()[0] : ra;
    },
    questionnaireId() {
        return this.getParams().id;
    },
    questionId() {
        let id = this.getQuery().questionId;
        if (id == undefined) {
            id = 0;
        }
        return id;
    },
    renderQuestion() {
        let currentQuestionId = this.questionId();
        let question = new Question(this.props.model.get('questions')[currentQuestionId]);
        return ( <QuestionView model={question} /> );
    },
    render() {
        let parentApp = this.props.parentApp;
        return (
            <div>
                <div className="bar bar-header bar-positive">
                    <button className="button icon ion-navicon" onClick={parentApp.refs.sideMenu.toggleLeft}/>
                    <h1 className="title" style={{textTransform: 'capitalize'}}>{this.currentRoomArea()}</h1>
                    <button className="button icon ion-android-arrow-back" onClick={this.goBack}/>
                </div>
                <Content scroll={true} overflowScroll={true} className='has-header has-footer'>
                    {this.renderQuestion()}
                </Content>
                <div className="bar bar-footer bar-royal">
                    <Link to={this.previousQuestion()} className="button button-stable">Prev</Link>
                    <div className="title">Jump to area</div>
                    <Link to={this.nextQuestion()} className="button button-stable">Next</Link>
                </div>
            </div>
        );
    },
    questionCount() {
        return this.props.model.get('questions').length;
    },
    nextQuestion() {
        console.log('Next question');
        let questionCount = this.questionCount();
        let nextId = this.questionnaireId() >= questionCount ? 0 : this.questionId() + 1;
        return this.makePath('questionnaires/consume', {id: this.questionnaireId()}, {questionId: nextId});
    },
    previousQuestion() {
        console.log('Previous question');
        let questionCount = this.questionCount();
        let previousId = this.questionId() <= 0 ? questionCount : this.questionnaireId() - 1;
        return this.makePath('questionnaires/consume', {id: this.questionnaireId()}, {questionId: previousId});
    },
    areaJump() {
        console.log('Area jump')
    }
});