React/Firebase -> DocumentReference.set() called with invalid data. Unsupported field value: undefined

I'm trying to add in back-end with Firebase a document in a collection whose name is randomly generated thanks to a function firestoreAutoId() however when I submit the form React returns me an error saying "Error in creating user FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field lastname in document av_deliveries/[object Object])" ", it may seem silly but I don't really understand why this error. It doesn't matter if I change the name or the value, it goes to another problem.

Here is the whole code for a better understanding:

AddDelivery.Js

import { createDelivery, firestoreAutoId } from '../firebase';  import './AddDelivery.css';    class AddDelivery extends Component {      state = {when: '', whath: '', from: 0, to: 0, to_adress: '', to_tel: 0, name: '', to_name: '', name2: '', tel: 0, adress: '', info_comp: '', taken: false, taken_by: "X", city:''};      handleChange = (e) => {          const { name, value } = e.target;            this.setState({ [name]: value });      };      handleSubmit = async (e) => {          e.preventDefault();          const {when, whath, from, to, to_adress, to_tel, name, to_name, name2, tel, adress, info_comp, taken, taken_by, city} = this.state;          try {              let id              id = firestoreAutoId()              await createDelivery({ id }, { when }, { whath }, { from }, { to }, { to_adress }, { to_tel } , { name } , { to_name }, { name2 }, { tel } , { adress } ,  { info_comp } , { taken } , { taken_by } , { city });          } catch (error) {              console.log('error', error);          }          this.setState({id: '', when: '', whath: '', from: 0, to: 0, to_adress: '', to_tel: 0, name: '', to_name: '', name2: '', tel: 0, adress: '', info_comp: '', taken: false, taken_by: "X", city:''});      };      render() {      const {when, whath, from, to, to_adress, to_tel, name, to_name, name2, tel, adress, info_comp, taken, taken_by, city} = this.state;      return (          <div className="main-wrapper">              <div className="form-main-wrapper">                  <p className="form-add-delivery-hero-title">Ajouter une livraison</p>                  <form className="form-wrapper" onSubmit={this.handleSubmit}>                      <div className="form-when-wrapper">                          <div className="form-when">                              <label>Quand ?</label>                              <input type="date" name="when" value={when} onChange={this.handleChange} required></input>                          </div>                          <div className="form-when-hour">                              <label>A quelle heure ?</label>                              <input type="time" name="whath" value={whath} onChange={this.handleChange} required></input>                          </div>                          <div className="form-city-name">                              <label>Ville ?</label>                              <select className="form-city-selector" name="city" value={city} onChange={this.handleChange}>                                  <option value="Lyon">Lyon</option>                                  <option value="Montpellier">Montreuil</option>                                  <option value="Paris">Paris</option>                                  <option value="Vélizy-Villacoublay">Vélizy-Villacoublay</option>                                  <option value="Viroflay">Viroflay</option>                              </select>                          </div>                      </div>                      .... Same for the rest of the form..  

Firebase.js

export const createDelivery = async (id1, when1, whath1, from1, to1, adress_to1, tel_to1, name1, name2, tel1, adress1, info_comp1, taken1, taken_by1, city1) => {      const userRef = firestore.doc(`av_deliveries/${id1}`);    const snapshot = await userRef.get();      if (!snapshot.exists) {      const { id } = id1;      const { when } = when1;      const { whath } = whath1;      const { from } = from1;      const { to } = to1;      const { adress_to } = adress_to1;      const { tel_to } = tel_to1;      const { name } = name1;      const { lastname } = name2;      const { tel } = tel1;      const { adress } = adress1;      const { info_comp } = info_comp1;      const { taken } = taken1;      const { taken_by } = taken_by1;      const { city } = city1;        try {          await userRef.set({          id,          when,          whath,          from,          to,          adress_to,          tel_to,          name,          lastname,          tel,          adress,          info_comp,          city,        });      } catch (error) {        console.log('Error in creating user', error);      }    }  };  

Thanks for your help!

https://stackoverflow.com/questions/66835466/react-firebase-documentreference-set-called-with-invalid-data-unsupported March 28, 2021 at 03:47AM