I am getting this error at line 145 as stated in the heading in my code but i can't really trace the error to it's source as it is pointing at a section that looks normal to me. Below is the error and my code:
Unexpected token, expected ";"
import React from 'react';
import ReactDOM from 'react-dom';
// import PropTypes from 'prop-types';
import Popup from '../../../Widget/Popup';
import api from '../../../Api';
// import TokenContext from '../../../token-context';
import UserBar from '../../UserBar';
export default class Question extends React.Component {
constructor(props) {
super(props);
this.state = {
/* in case we are editing an existed question
we will update these stats in `componentdidmount`
otherwise, we are creating a new question
*/
questionName: '',
questionType: '',
timeLimit: 0,
points: 0,
video: '',
photo: '',
// flag the toggles to show input bar where user attach youtube url
showInput: false,
// Answers to this question
answers: [],
// there could be more than 1 correct answers to this question
// in multi type question
correctAnswers: [],
// keep track of the answer user want to add
newAnswerInput: '',
};
}
componentDidMount = async () => {
const { token } = this.state;
const { match } = this.props;
console.log(token);
const quizId = match.params[0];
const questionIndex = match.params[1];
const path = `admin/quiz/${quizId}`;
const response = await api(path, 'GET', null, token);
if (response.status === 200) {
const r = await response.json();
if (questionIndex <= r.questions.length) {
this.setState({ ...r.questions[questionIndex] });
}
} else {
const r = await response.json();
const popup = <Popup message={JSON.stringify(r.error)} />;
ReactDOM.render(popup, document.getElementById('popup'));
}
}
changeHandler = (event) => {
this.setState({
[event.target.name]: event.target.value
});
}
// separate handler to store file into the state
// since we retrieve the file using target.files[0]
uploadFile = (event) => {
this.setState({ photo: event.target.files[0] });
}
toggleInput = (state) => {
this.setState({ showInput: !state.showInput });
}
renderThumbnail = () => {
const { video, photo } = this.state;
if (video !== '') {
return (
<video width="320" height="240" controls>
<source src={video} />
<track src="" kind="captions" srcLang="en" label="english_captions" />
</video>
);
return (<img src={photo} alt="photo" width="320" height="auto" />);
}
timeLimitOptions = () => {
times = [5, 10, 20, 30, 60, 90, 120, 240];
timesOptions = times.map((t) => (
<option value={t.toString()}>{t}</option>
));
return timesOptions;
}
addAnswer = () => {
const { newAnswerInput, answers } = this.state;
if (newAnswerInput !== '') {
this.setState({
answers: [...answers, newAnswerInput],
newAnswerInput: '',
});
}
}
// handler that modify the list of correct answers in state
changeCorrectAnswer = (event) => {
const { correctAnswers } = this.state;
var newCorrectAnswers = [...correctAnswers];
// following code is adapted from
// https://stackoverflow.com/questions/36326612/delete-item-from-state-array-in-react
if (newCorrectAnswers.includes(event.target.name)) {
var index = array.indexOf(event.target.name);
newCorrectAnswers.splice(index, 1);
} else {
newCorrectAnswers.push(event.target.name);
}
this.setState({correctAnswers: newCorrectAnswers});
}
updateQuestion = async () => {
const { token } = this.state;
const { match, history } = this.props;
console.log(token);
const quizId = match.params[0];
const questionIndex = match.params[1];
const path = `admin/quiz/${quizId}`;
var response = await api(path, 'GET', null, token);
if (response.status === 200) {
// do an update api request with the new question info
const r = await response.json();
const newQuestion = {...this.state};
r.questions = [...r.questions, newQuestion];
response = await api(path, 'PUT', r, token);
// if we update with the new question successfully, navigates to previous page
if (response.status === 200) {
history.goBack();
} else {
const r = await response.json();
const popup = <Popup message={JSON.stringify(r.error)} />;
ReactDOM.render(popup, document.getElementById('popup'));
}
} else {
const r = await response.json();
const popup = <Popup message={JSON.stringify(r.error)} />;
ReactDOM.render(popup, document.getElementById('popup'));
}
}
render() {
const { answers, correctAnswers } = this.state;
return (
<div className="flex-container-column">
<UserBar />
<form onsubmit={this.updateQuestion}>
<input
type="text"
name="questionName"
onChange={this.changeHandler}
value="Click to start typing your question"
required />
{this.renderThumbnail}
<button type="button" onClick={this.toggleInput}>
upload a video
</button>
{showInput
&& (
<div className="flex-container-column">
<input type="text" name="videoUrl" onChange={this.changeHandler} required />
<button type="button" onClick={this.toggleInput}>
Attach
</button>
</div>
)}
<label>
Upload your file
</label>
<input type="file" onChange={this.uploadFile} />
<label for="questionType">
Question type
</label>
<select name="questionType">
<option value="single">
single
<br />
Player can only select one of the answer
</option>
<option value="multi">
multi
<br />
Player can select multiple answer before submitting
</option>
</select>
<label for="timeLimit">
Time limit
</label>
<select name="timeLimit" onChange={this.changeHandler}>
{this.timeLimitOptions}
</select>
<label for="points">
Points
</label>
<select name="points">
<option value="0">0</option>
<option value="1000" selected>1000</option>
<option value="2000">2000</option>
</select>
<input type="submit" value="Add Question" />
// following code is a snippet adapted from
// https://www.pluralsight.com/guides/implementing-radio-list-with-text-input-in-reactjs
<div>
{answers.map((answer) => (
<div>
<input
type="checkbox"
name={answer}
value={answer}
onChange={this.changeCorrectAnswer}
/>
<label for={answer}>
{answer}
</label>
</div>
))}
<input
type="text"
name="newAnswerInput"
checked={correctAnswers.includes(answer)}
onChange={(e) => this.setState({ newAnswerInput: e.target.value })}
/>
<button type="button" onClick={this.addAnswer}>
Add answer
</button>
</div>
<button type="submit" value="Submit" />
</form>
</div>
);
}
}Can someone point me out where should I start looking at first when I see this kind of error? Thanks!
