FireBaseError: Function addDoc() called with invalid data. Unsupported field value: undefined while-CodePudding

I am trying to add data to firebase database. While doing so I get this error: 'FireBaseError: Function addDoc() called with invalid data. Unsupported field value: undefined'. The registration form takes 2 inputs name and email. The function handleSubmit will take the inputs name and email from the form and the addDoc function inside it will be added to the database. the FirebaseConfig.js contains all the configurations of firebase.

Registration.js

import React, {useState} from 'react'
import { TextField, Button } from '@mui/material'
//import { getAuth } from 'firebase/auth'
import { collection, addDoc } from 'firebase/firestore'
import { app, database } from './firebaseConfig'
//import {getDatabase, set, ref } from 'firebase/database'

export default function Registration() {
    //let auth=getAuth()
    let collectionRef = collection(database, "users")
    const [data, setdata] = useState({});

    const handleInput = (event) => {
        let newInput = {[event.target.value] : event.target.value}
        setdata({...data, ...newInput});
    }

    const handleSubmit = () => {
        
        addDoc(collectionRef, {
            name: data.name,
            email: data.email
        }).then(()=>{
            alert('Data added successfully!');
        }).catch((err)=>{
            alert(err.message);
        });

    }
  return (
    <div>
        <form>
            <h1>Registration Form</h1>
            <TextField id="filled-basic" label="Name" name='name' variant="filled" onChange={(event)=>(handleInput(event))} /><br/><br/>
            <TextField id="filled-basic" label="Email" name='email' variant="filled" onChange={(event)=>(handleInput(event))}/><br/><br/>
            <Button variant='contained' color='success' onClick={(e)=>(handleSubmit(e))}>Submit</Button>
        </form>
    </div>
  )
}

FirebaseConfig.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import {getFirestore} from "firebase/firestore"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: ...,
  authDomain: ...,
  projectId: ...,
  storageBucket: ...,
  messagingSenderId: ...,
  appId: ...,
  measurementId: ...
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const database = getFirestore(app);

CodePudding user response：

Either name or email seems to be undefined. Try adding a condition to check that as shown below:

const handleSubmit = () => {
  console.log(data);
  if (data.name && data.email) {
    addDoc(collectionRef, {
      name: data.name,
      email: data.email
    }).then(() => {
      alert('Data added successfully!');
    }).catch((err) => {
      alert(err.message);
    });
  } else {
    console.log("Invalid data")
  }
}

CodePudding user response：

I found out the mistake. In Registration.js, it should be let newInput = {[event.target.name] : event.target.value} instead of let newInput = {[event.target.value] : event.target.value}. Thanks for reading :)