FirebaseError: Function addDoc() called with invalid data. Unsupported field value

Question

im trying to add post to my firebase database but i got error like in the title (Uncaught (in promise) FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined (found in field title in document posts/5TT9b7F0lkqxoivmsIiH)). Here's my code:

import React, { Component } from 'react';
import { addDoc, collection } from 'firebase/firestore';
import { db } from '../firebaseconf';

class CreatePost extends Component {
    constructor(props) {
        super(props);
        this.state = {
            setTitle: "",
            setPostText: ""
        };
    }

    sTitle = (event) => {
        this.setState({ setTitle: (event.target.value) });
    }

    sPostText = (event) => {
        this.setState({ setPostText: (event.target.value) });
    }

    collectionRef = collection(db, "posts");

    createPost = async () => {
        await addDoc(this.collectionRef, { title: this.setTitle, postText: this.setPostText });
    }

    render() {
        return (
            <div className="cpPage">
                <div className="cpContainer">
                    <h1>Create a Post</h1>
                    <div className="inputGp">
                        <label>Title:</label>
                        <input
                            placeholder="Title..."
                            onChange={this.sTitle}
                        />
                    </div>
                    <div className="inputGp">
                        <label>Post:</label>
                        <textarea
                            placeholder="Write your post..."
                            onChange={this.sPostText}
                        />
                    </div>
                    <button onClick={this.createPost}>Add your post</button>
                </div>
            </div>
        );
    }
}
export default CreatePost;

Answer 1

Firebase Firestore doesn't accept undefined as a value for one of the docs fields (title in your case). Instead, you can use null.

(Untested) example:

await addDoc(this.collectionRef, {
  title: this.setTitle || null,
  postText: this.setPostText || null,
});