Javascript – TypeError: Cannot read properties of undefined (reading 'error') when submitting a form

I get this error in my console when trying to submit a form in my react/redux app using rtk query with firebase/firestore.

Cannot read properties of undefined (reading ‘error’)

I think the issue is with my handle submit function. When I click on the save button, the data get saved in my firestore database; but because it throws an error, it doesn’t execute uptill the line where the entered data has to be cleared from the form and fetched back to the page. Until I reload the browser, then the entered data is cleared, the error disappears and the data is fetched and rendered. This is a bad user experience and I think I’m missing something in the handleSubmit function.

Any hint on how I can resolve this?

Below is the codebase where I’m using the handleSubmit function

import React, { useState, useEffect } from 'react';
import { storage } from '../../services/firebase';
import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useAddPostsMutation } from '../../services/postsApi';

const initialState = {
  title: '',
  content: '',
};

const AddEditPosts = () => {
  const [data, setData] = useState(initialState);
  const [file, setFile] = useState(null);
  const [progress, setProgress] = useState(null);
  const [addPosts] = useAddPostsMutation();

  const { title, content } = data;

  useEffect(() => {
    const uploadFile = () => {
      const storageRef = ref(storage, file.name);
      const uploadTask = uploadBytesResumable(storageRef, file);

      uploadTask.on(
        'state_changed',
        (snapshot) => {
          const progress =
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log('Upload is ' + progress + '% done');
          setProgress(progress);
          switch (snapshot.state) {
            case 'paused':
              console.log('upload is paused');
              break;
            case 'running':
              console.log('upload is running');
              break;
            default:
              break;
          }
        },
        (error) => {
          console.log(error);
        },
        () => {
          getDownloadURL(uploadTask.snapshot.ref)
            .then((downloadURL) => {
              toast.info('Imagee uploaded successfully');
              setData((prev) => ({ ...prev, imgURL: downloadURL }));
            })
            .catch((error) => {
              // Handle error gracefully
              console.error('Error getting download URL: ', error);
              toast.error('Error Uploading image');
            });
        }
      );
    };
    file && uploadFile();
  }, [file]);

  const handleChange = (e) => {
    setData({ ...data, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (title && content) {
      const result = await addPosts(data);
      console.log('result', result);

      if (result && result.error) {
        console.error('Error add post:', result.error);
        // Handle error appropriately (e.g. show a toast, display an error message)
      }
    } else {
      // Clear the form or perform any other necessary actions upon successful submission
      setData(initialState);
      setFile(null);
    }
  };
  return (
    <section>
      <h2>Add a New Post</h2>
      <form onSubmit={handleSubmit}>
        <label htmlFor='postTitle'>Post Title:</label>
        <input
          type='text'
          id='title'
          name='title'
          value={title}
          onChange={handleChange}
        />
        <label htmlFor='postContent'>Content:</label>
        <textarea
          id='content'
          name='content'
          value={content}
          onChange={handleChange}
        />
        <div>
          <input type='file' onChange={(e) => setFile(e.target.files[0])} />
        </div>
        <button type='submit' disabled={progress !== null && progress < 100}>
          Save Post
        </button>
      </form>
    </section>
  );
};

export default AddEditPosts;