Having a bit of a headache at the moment. I creating a quiz platform using React, and currently, I have a question component, which using , where inside that you can add however many 's as you like. However, I want to make these answers have unique id's for when I submit the quiz to the server (haven't got that far yet).
Where I try to use {this.props.qNo} I get the error: "this: this '...' expected ts(1005)"
Can anyone tell me what I'm doing wrong? Probably something stupid I imagine!
Individual Answer Components
import React from 'react';
class AnswerText extends React.Component {
constructor(props){
super(props);
}
render(){
return (
<div className="input">
<label htmlFor="answer1">Answer {this.props.qNo}</label>
<input name="answer1" type="text" id="answer"{this.props.qNo}></input>
<input type="checkbox" name="answerCheck" id="answerCheck" ></input>
</div>
)
}
}
export default AnswerText;
AddTextQuestion code
import React from 'react';
import '../css/addQuestion.css';
import AnswerText from './answerText.js';
class AddTextQuestion extends React.Component {
constructor(props) {
super(props);
this.state = {
noAnswers: 0
}
this.addAnswer = this.addAnswer.bind(this);
}
addAnswer(){
this.setState({
noAnswers: this.state.noAnswers + 1
})
}
render(){
let answers = [];
for(let i = 0; i < this.state.noAnswers; i++){
answers.push(<AnswerText key={i} qNo={i + 1} />)
}
return (
<div className="qContainer">
<form className="addQForm">
<div className="questionContainer containers">
<h3 className="qNo">Question {this.props.qNo}</h3>
<div className="input">
<label htmlFor="question">Question</label>
<input name="question" type="text" id="question"></input>
</div>
</div>
<div className="answerContainer containers">
<button type="button" onClick={this.addAnswer}><i className="material-icons">add</i> Answer</button>
{answers}
</div>
</form>
</div>
);
}
}
export default AddTextQuestion;
Can anyone help?
Thank you
