What is causing the following Firestore error in ReactJS? Function DocumentReference .update() called with invalid data. Unsupported field value:

Question

There seems to be something wrong with the way I update state, as it gets overwritten...

import Servis from "./funkc/servisni";
import React, { useState, useEffect } from "react";

export default function ContactUpdate(props) {
  const initialState = {
    ime: props.item.Ime,
    prezime: props.item.Prezime,
    datum: props.item.Datum,
    kontakt: props.item.Kontakt,
    published: props.item.Published,
    id: props.Id,
  };

  const [theItem, setTheItem] = useState();
  const [message, setMessage] = useState();

  useEffect(() => {
    setTheItem(props.item);
    console.log(theItem);
  }, []);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setTheItem({ ...theItem, [name]: value });
    console.log(theItem, props.Id);
  };

the problem seems to be in the following:

  const updateItem = (theItem) => {
    let data = {
      Ime: theItem.Ime,
      Prezime: theItem.Prezime,
      Kontakt: theItem.Kontakt,
      Datum: theItem.Datum,
      Published: true,
      Id: theItem.id,
    };

    Servis.update(theItem.id, data)
      .then(() => {
        setMessage("Uspjesno ste izmijenili unos!");
      })
      .catch((e) => {
        console.log(e);
      });
  };

as visible in the console.log

  return (
    <div className="container">
      {console.log(("theItem", props.Id, theItem))}
      {theItem ? (
        <div className="edit-form">
          <h4>Kontakt</h4>
          ...
          <button type="submit" onClick={updateItem}>
            Update
          </button>
          <p>{message}</p>
        </div>
      ) : (
        <div>
          <br />
          <p>Odaberi jedan broj...</p>
        </div>
      )}{" "}
    </div>
  );
}

The call on the updateItem function by clicking on the 'Update' button results in the error: Function DocumentReference.update() called with invalid data. Unsupported field value...

Answer 1

Resolved through being careful about naming variables...

     </div>
      <ContactUpdate item={item} id={theId} />
    </div>

and then

  const updateItem = () => {
    let data = {
      Ime: theItem.Ime,
      Prezime: theItem.Prezime,
      Kontakt: theItem.Kontakt,
      Datum: theItem.Datum,
      published: true,
      id: props.id,
    };

    Servis.update(props.id, data)
      .then(() => {
        setMessage("Uspjesno ste izmijenili unos!");
      })
      .catch((e) => {
        console.log(e);
      });
  };