RangeError: Maximum call stack size exceeded Reactjs ?
code working ok but when i click last quiz showing error
RangeError: Maximum call stack size exceeded
Also Score not showing in below red mark images please help me how to solve this issue i am new for react
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Questionlist from './quiz/Questionlist.jsx';
import Scorebox from './quiz/Scorebox.jsx';
import Results from './quiz/Results.jsx';
import * as serviceWorker from './serviceWorker';
class Quiz extends React.Component {
constructor(props){
super(props);
this.state= {
questions : [
{
id: 1,
text: 'What is your name?',
choices:[
{
id: 'a',
text: 'Michael'
},
{
id: 'b',
text: 'Brand'
},
{
id: 'c',
text: 'Steven'
},
],
correct: 'b'
},
{
id: 2,
text: 'What is your mother name?',
choices:[
{
id: 'a',
text: 'Sara'
},
{
id: 'b',
text: 'Denny'
},
{
id: 'c',
text: 'senny'
},
],
correct: 'c'
},
{
id: 3,
text: 'What is your father name?',
choices:[
{
id: 'a',
text: 'Bobby'
},
{
id: 'b',
text: 'Harry'
},
{
id: 'c',
text: 'Waye'
},
],
correct: 'c'
},
{
id: 4,
text: 'What is your friend name?',
choices:[
{
id: 'a',
text: 'John'
},
{
id: 'b',
text: 'Paul'
},
{
id: 'c',
text: 'Jose'
},
],
correct: 'a'
},
],
score: 0,
current: 1
}
}
setCurrent(current){
this.setState({current});
}
setScore(score){
this.setScore({score});
}
render() {
if(this.state.current > this.state.questions.length){
var scorebox = '';
var results = <Results {...this.state} />
}else{
scorebox = <Scorebox {...this.state} />
var results = '';
}
//return <Questionlist questions={this.state.questions} />
return(
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Quiz</h1>
{scorebox}
<Questionlist {...this.state} setCurrent={this.setCurrent.bind(this)} setScore={this.setScore.bind(this)} />
{results}
</div>
</div>
</div>
)
}
}
ReactDOM.render(<Quiz />, document.getElementById('root'));
serviceWorker.unregister();
Questionlist.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Question from './Question.jsx';
class Questionlist extends React.Component {
render() {
return(
<div className="question">
{
this.props.questions.map(question => {
//console.log(question.id);
//console.log(this.props.current);
if(question.id == this.props.current){
return <Question question={question} key={question.id} {...this.props} />
}
})
}
</div>
)
}
}
export default Questionlist
Question.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Question extends React.Component {
onChange(e){
e.preventDefault();
const {setCurrent, setScore, question} = this.props;
let selected = e.target.value;
if(selected == question.correct){
setScore(this.props.score+1);
}
setCurrent(this.props.current+1)
}
render() {
const {question} = this.props;
return(
<div className="well">
<h3>{question.text}</h3>
<hr />
<ul className="list-group">
{
this.props.question.choices.map(choice => {
return(
<li className="list-group-item" key={choice.id}>
{choice.id} <input type="radio" onChange={this.onChange.bind(this)} name={question.id} value={choice.id} /> {choice.text}
</li>
)
})
}
</ul>
</div>
)
}
}
export default Question
Scorebox.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Scorebox extends React.Component {
render() {
console.log(this.props);
return(
<div className="well">
Question {this.props.current} out of {this.props.questions.length} <span className="pull-right"><strong>Score: {this.props.score}</strong></span>
</div>
)
}
}
export default Scorebox
Results.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Results extends React.Component {
render() {
var percent = (this.props.score / this.props.questions.length * 100);
if(percent > 80){
var message = "Awesome";
}else if(percent < 80 && percent > 60){
var message = "You did ok";
}else{
var message = "You did Harriable";
}
return(
<div className="well">
<h4>You Got {this.props.score} out of {this.props.questions.length} Correct</h4>
<h1>{percent}% - {message}</h1>
<hr />
<a href="/app">Take Again</a>
</div>
)
}
}
export default Results
