node.js - how can I store 4input data to anoptions array?

Question

this is my react code where I want to create polls using react form but I don't understand what goes wrong with my code...!`Here I have 4 input field with { option1: "", option2: "", option3: "", option4: "" }, but I don't know how to store data just like I store data using POSTMAN...!CAN ANYONE HELP PLEASE help....!PLEASE HEPL I DO NOT UNDERSTAND WHAT TO DO...! WITH MY CODE HELP PLEASE......

import React, { useState, useEffect } from "react";
import "../styles.css";
import { isAutheticated } from "../auth/helper/index";
import { createaPoll } from "./helper/adminapicall";

const AddPoll = () => {
  const { user, token } = isAutheticated();
  const [value, setValue] = useState({
    question: "",
    options: { option1: "", option2: "", option3: "", option4: "" },
    error: "",
    loading: "false",
    getRedirect: false,
    formData: "",
  });

  const { question, options, error, loading, getRedirect, formData } = value;

  const handleChange = (event) => {
    // setError("");
    setValue({ ...value, [event.target.name]: event.target.value });
    // console.log(event.target.value);
    const newOption = {
      ...value.options,
      [event.target.name]: event.target.value,
    };
    setValue((prev) => ({ ...prev, options: newOption }));
  };

  const onSubmit = (event) => {
    event.preventDefault();
    setValue({ ...value, error: "", loading: true });
    // console.log(handel);
    createaPoll(user._id, token, { question, options }).then((data) => {
      if (data.error) {
        setValue({ ...value, error: data.error });
      } else {
        setValue({
          ...value,
          question: "",
          options: { option1: "", option2: "", option3: "", option4: "" },
          error: "",
          loading: "false",
          getRedirect: false,
          formData: "",
        });
      }
    });
  };

  return (
    <div className="AddPoll">
      <div className="container">
        <h1>Add New Poll</h1>
        <form>
          <textarea
            rows="4"
            cols="50"
            className="form-control mb-2"
            placeholder="Question"
            name="question"
            value={question}
            onChange={(event) => handleChange(event)}
            autoFocus
          ></textarea>
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option1"
            onChange={(event) => handleChange(event)}
            name="option1"
            value={options.option1}
          />
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option2"
            onChange={(event) => handleChange(event)}
            name="option2"
            value={options.option2}
          />
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option3"
            onChange={(event) => handleChange(event)}
            name="option3"
            value={options.option3}
          />
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option4"
            onChange={(event) => handleChange(event)}
            name="option4"
            value={options.option4}
          />
          <button type="submit" onClick={onSubmit} className="btn Submitbtn">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default AddPoll;

And when I did with POSTMAN it's work fine! Here is my POSTMAN IMAGE

so I don't understand what to do, with my react form code , can anyone help me please....!

question from:https://stackoverflow.com/questions/65858267/how-can-i-store-4input-data-to-anoptions-array

Answer 1

Try to separate question and option values in handleChange function.

const handleChange = event => {
  if (event.target.name === 'question') {
    setValue({ ...value, [event.target.name]: event.target.value });
  } else {
    const newOption = {
      ...value.option,
      [event.target.name]: event.target.value
    };
    setValue({ ...value, option: newOption });
  }
};