Using postman, I can post data into API, in this way...
{
"incorrectAnswers": [
"Judy Brady",
"Coventry Patmore",
"Jerome K. Jerome"
],
"question": "question",
"correctAnswer": "correctAnswer",
"published": false,
"createdAt": "2022-09-22T05:23:11.406Z",
"updatedAt": "2022-09-22T05:23:11.406Z",
"id": "632bf13fb41134231098c3ad"
}
...Which is working perfectly no, problem.
But using react I do not understand how I can do this thing.
export default class AddTutorial extends Component {
constructor(props) {
super(props);
this.onChangeQuestion = this.onChangeQuestion.bind(this);
this.onChangeCorrectAnswer = this.onChangeCorrectAnswer.bind(this);
this.onChangeIncorrectAnswer = this.onChangeIncorrectAnswer.bind(this);
this.saveQuiz = this.saveQuiz.bind(this);
this.newQuiz = this.newQuiz.bind(this);
this.state = {
question: "",
correctAnswer: "",
incorrectAnswer: [],
};
}
onChangeQuestion(e) {
this.setState({
question: e.target.value,
});
}
onChangeCorrectAnswer(e) {
this.setState({
correctAnswer: e.target.value,
});
}
onChangeIncorrectAnswer(e) {
this.setState({
incorrectAnswer: e.target.value,
});
}
saveQuiz() {
var data = {
question: this.state.question,
correctAnswer: this.state.correctAnswer,
onChangeIncorrectAnswer: this.state.incorrectAnswer,
};
QuizDataService.create(data)
.then((response) => {
this.setState({
question: response.data.question,
correctAnswer: response.data.correctAnswer,
incorrectAnswer: response.data.incorrectAnswer,
submitted: true,
});
console.log(response.data);
})
.catch((e) => {
console.log(e);
});
}
newQuiz() {
this.setState({
question: "",
correctAnswer: "",
incorrectAnswer: "",
submitted: false,
});
}
}
render() {
return (
<div className="submit-form">
{this.state.submitted ? (
) : (
<div>
<div className="form-group">
<label htmlFor="question">Question</label>
<input
type="text"
className="form-control"
id="question"
required
value={this.state.question}
onChange={this.onChangeQuestion}
name="question"
/>
</div>
<div className="form-group">
<label htmlFor="correctAnswer">Correct Answer</label>
<input
type="text"
className="form-control"
id="correctAnswer"
required
value={this.state.correctAnswer}
onChange={this.onChangeCorrectAnswer}
name="correctAnswer"
/>
</div>
{/* INCORRECT ANSWERS */}
<div className="form-group">
<label htmlFor="incorrectAnswer">Option A</label>
<input
type="text"
className="form-control"
id="incorrectAnswer"
required
value={this.state.incorrectAnswer[0]}
onChange={this.onChangeIncorrectAnswer}
name="incorrectAnswer[0]"
/>
</div>
<div className="form-group">
<label htmlFor="incorrectAnswer">Option B</label>
<input
type="text"
className="form-control"
id="incorrectAnswer"
required
value={this.state.incorrectAnswer[1]}
onChange={this.onChangeIncorrectAnswer}
name="incorrectAnswer[1]"
/>
</div>
<div className="form-group">
<label htmlFor="incorrectAnswer">Option C</label>
<input
type="text"
className="form-control"
id="incorrectAnswer"
required
value={this.state.incorrectAnswer[2]}
onChange={this.onChangeIncorrectAnswer}
name="incorrectAnswer[2]"
/>
</div>
<button onClick={this.saveQuiz} className="btn btn-success">
Submit
</button>
</div>
)}
</div>
);
}
I want to post array object in incorrect answers. What changes I have to make to achieve the thing.