I have this data structure in Firestore:
Expected output: I will only update the array[1]
which is M
.
What it currently does: Instead of only updating the array[1]
it added another data in the array
. So instead of having only indexes 0,1,2
it became 0,1,2,3
const [category, setCategory] = useState([]);
//useEffect to get all of the categories
const [options, setOptions] = useState([]);
const [edit, setEdit] = useState();
const handleSubmit = async (e) => {
e.preventDefault();
const ref = doc(db, "category", state);
await updateDoc(ref, {
category: edit,
options: arrayUnion(options),
});
console.log("updated")
};
Forms:
{category &&
category.map((category, index) => (
<form onSubmit={handleSubmit}>
<TextField
defaultValue={category.cat}
type="text"
value={categoryEdit}
fullWidth
onChange={(e) => setCategoryEdit(e.target.value)}
/>
{category.options.map((i) => (
<TextField
type="text"
defaultValue={i}
variant="outlined"
fullWidth
value={options[i]}
onChange={(e) => setOptions(e.target.value)}
/>
))}
</>
)}
<Button type="submit">Submit</Button>
</form>
))}
CodePudding user response:
There is no way to update an item in an array field with either arrayUnion
or otherwise. You'll have to:
- Read the document into your application
- Get the full array
- Update the one item in the array
- Write the full array back to the document
Also see: