I am trying to update these options in Firestore:

enter image description here

For editing the category, it does sucessfully update it. But for the options array, this is the error it displays:

Uncaught TypeError: options is not a function

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,
    });
    console.log("updated");
  };

Forms

I am using a defaultValue to show the initial value that was saved from Firestore.

 {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(i))}
                        />
                      ))}
         
                  </>
                )}
                <Button type="submit">Submit</Button>
            </form>
          ))}

CodePudding user response：

This has nothing to do with updating Firestore.

options is an array, but you're calling it like a function here using parenthesis:

value={options(i)}

If you want to index into the array, use square brackets, not parens.

value={options[i]}