I am facing an issue where I want to store multiple options in an array named options from a form that contains textboxes. However, instead of each option being added under the parameter options, they are getting overridden by one another.
hooks
const [description, setDescription] = useState("");
const [text, setText] = useState("");
const [type, setType] = useState("");
const [options, setOptions] = useState([]);
submit function
e.preventDefault();
axios({
method: "post",
url: "http://localhost:8080/new/",
data: {
title: title,
description: description,
questions:{
text: text,
type: type,
options: options,
}
},
config: { headers: { "Content-Type": "application/json" } },
})
.then(function () {
alert("Successfully submitted application.");
})
.catch(function (error) {
alert("Failed to submit application.");
console.log(error);
});
}
Options Section in form
<input
required
type="options"
id="options"
name="options"
value={options}
onChange={(e) => setOptions(e.target.value)}
placeholder="ex. A).Blue"
/>
<br />
B:
<input
required
type="options"
id="options"
name="options"
value={options}
onChange={(e) => setOptions(e.target.value)}
placeholder="ex. B).Red"
/>
<br />
Submit button
variant="primary"
onClick={(e) => {
SubmitQuiz(e);
}}
type="submit"
>
Submit Quiz
</button>
output
title "I"
description "need"
questions
text "some"
type "Select One"
options "help"
desired output https://i.sstatic.net/CqRHi.jpg