Array post request in react

Viewed 39

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.

0 Answers
Related