React: Cannot replace the component inside render() method - reactjs

Question

I am building a simple question-answer game for practise, however having some issues on question change. The way I planned to handle the rendering questions one by one is to create a queue of questions inside an array as component state (PractiseScreen.prototype.state.questionQueue) and using an IntermediateRenderer component to pass the current question index as props and the question queue as it is, so it could render the correct question on parent component's state change. However, when I debug the component, I do not see that the next question is rendered.
What is the issue in my code? Thanks in advance!
import React from 'react';
import * as Animatable from 'react-native-animatable';
import {
View,
Text,
StatusBar,
TouchableWithoutFeedback,
} from 'react-native';
import MyText from '../custom-components/MyText';
import Question from '../components/Question';
import entries from '../mockData/entries';
class IntermediateRenderer extends React.Component {
render() {
return (<React.Fragment>
{this.props.allQuestionComponents[this.props.questionIndexToRenderNext]}
</React.Fragment>)
}
}
export default class PractiseScreen extends React.Component {
static navigationOptions = {
header: null
}
constructor() {
super();
this.state = {
currentQuestionIndex: 0,
questionQueue: []
}
this.buildQuestionQueue = this.buildQuestionQueue.bind(this);
this.goToNextQuestion = this.goToNextQuestion.bind(this);
}
componentDidMount() {
this.buildQuestionQueue();
}
buildQuestionQueue() {
const questionQueue = [];
entries.forEach(entry => {
questionQueue.push(<Question
entry={entry}
goToNextQuestion={this.goToNextQuestion}
/>)
});
this.setState({ questionQueue });
}
goToNextQuestion() {
console.log('Go to next question request is received.');
this.setState({ currentQuestionIndex: this.state.currentQuestionIndex + 1 }, () => {
console.log('Current question index is now: ', this.state.currentQuestionIndex);
})
}
render() {
if(this.state.questionQueue !== 0) {
return <React.Fragment>
<IntermediateRenderer
allQuestionComponents={this.state.questionQueue}
questionIndexToRenderNext={this.state.currentQuestionIndex}
/>
</React.Fragment>
} else {
<View>
<Text>
Questions are loading.
</Text>
</View>
}
}
}

Answer 1

Well, I think you just forgot return statement:
render() {
if(this.state.questionQueue !== 0) {
return <React.Fragment>
<IntermediateRenderer
allQuestionComponents={this.state.questionQueue}
questionIndexToRenderNext={this.state.currentQuestionIndex}
/>
</React.Fragment>
} else {
return <View>
<Text>
Questions are loading.
</Text>
</View>;
}
}
It seems that it runs fine first time, but when you proceed with next question it fails on missing return statement and display nothing.