CODEWITHSUNDEEP
reactjstypescriptfirebase
Kay
Kay

Reputation: 891

Firebase does not save empty array

Hello I have a question I am making app with Firebase and React. The problem is that I want to have comment array but it is empty when the item is created. How can I solve this problem and have an empty array and then update this array after adding comments.

There is a lot of code.

 const onSubmitHandler = (e: React.FormEvent): void => {
        e.preventDefault();
        if (user?.displayName) {
          const recipe: Recipe = {
            username: user.displayName,
            title: title,
            type: type,
            description: description,
            id: Math.random(),
            time: time,
            ingredients: ingredients,
            stars: Math.floor(Math.random() * 6) + 1,
            steps: steps,
            comments: [],
          };
          dispatch(recipeAction.addRecipe(recipe));
          dispatch(sendData(recipe));
          navigate("/");
        }
      };
Redux action 

export const fetchRecipes = () => {
  return async (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
    dispatch(uiAction.isLoading(true));
    const getRecipes = async () => {
      const response = await fetch(
        *FIREBASE API*
      );
      const data = response.json();
      return data;
    };

    try {
      const data = await getRecipes();
      console.log(data);
      if (data) {
        for (const key of Object.keys(data)) {
          dispatch(recipeAction.replaceRecipes(data[key]));
        }... other not needed code.
Redux slice 

replaceRecipes(state, action: PayloadAction<Recipe>) {
      const fetchedRecipe = action.payload;

      state.recipes.push(fetchedRecipe);
    },

Upvotes: 1

Views: 201

Answers (1)

Sambhav Khandelwal
Sambhav Khandelwal

Reputation: 3765

Why won't it save an empty array?

I don't have so much knowledge so I am just explaining it in Java.

When you create a new empty array like this:

List array = new ArrayList<>();

its size is 0. And, 0 can in other words be said null for an empty array. Now, Firebase ignores null or 0 sized array as it had nothing to display in the console.

Then what should I do?

It is not a hard thing to do that. Now, in your case, because there is no such key in the database, it will give null and then you try using it you'll get an exception. This is what every developer wants to prevent. So the solution can be to store a boolean in the database with the other keys to check if a data has the array or not. When the post is just created, there are no comments. You can set it to false. Now, when a user adds a comment, set it to true.

Now when fetching the comments, first check if the boolean is true or not. If true, fetch the comments. Or else just ignore.

Code?

As mentioned, I have not used React.JS so much so can't provide the code. But I hope that you will be able to do it as you have already done so much of it by yourself.

Upvotes: 1

Related Questions