React Native Calendar dot color displayed incorrectly

I develop an app with react native.I use 'react-native-calendars' library.But i have an error.

I was working on getting data from Async Storage and popping a dot on a calendar.

This is the stored data.

listnumber: 2

1calendar: 2023-03-30

2023-03-30calendar: happy-pink

2calendar: 2023-03-31

2023-03-31calendar: happy-yellow

And this is my code.

import React, {useState, useEffect} from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Calendar} from "react-native-calendars";
import {View, StyleSheet} from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage";

function HomeScreen({navigation}) {
  const [markedDates, setMarkedDates] = React.useState(null);
  const [dates, setDates] = React.useState([]);

  const readCalendarData = async () => {
    try {
      const listnumber = await AsyncStorage.getItem("listnumber");
      const listnumbertoint = parseInt(listnumber, 10);
      for (var i = 1; i <= listnumbertoint; i++) {
        console.log(i);
        const date = await AsyncStorage.getItem(i + "calendar");
        console.log(date);
        const color = await AsyncStorage.getItem(date + "calendar");
        console.log(color);
        if (color == "happy-pink" || color == "happy2-pink") {
          dates.push(date);
          let obj = dates.reduce(
            (c, v) =>
              Object.assign(c, {
                [v]: { marked: true, dotColor: 'pink' },
              }),
            {},
          );
          setMarkedDates(obj);
        }else if (color == "happy-yellow"){
         dates.push(date);
          let obj = dates.reduce(
            (c, v) =>
              Object.assign(c, {
                [v]: { marked: true, dotColor: 'yellow' },
              }),
            {},
          );
          setMarkedDates(obj);
        }else if (color == "sad-skyblue") {
          dates.push(date);
          let obj = dates.reduce(
            (c, v) =>
              Object.assign(c, {
                [v]: { marked: true, dotColor: 'skyblue' },
              }),
            {},
          );
          setMarkedDates(obj);
        }else if (color == "soso-green") {
          dates.push(date);
          let obj = dates.reduce(
            (c, v) =>
              Object.assign(c, {
                [v]: { marked: true, dotColor: 'green' },
              }),
            {},
          );
          setMarkedDates(obj);
        }else if (color == "soso-orange") {
          dates.push(date);
          let obj = dates.reduce(
            (c, v) =>
              Object.assign(c, {
                [v]: { marked: true, dotColor: 'orange' },
              }),
            {},
          );
          setMarkedDates(obj);
        }else{
          dates.push(date);
          let obj = dates.reduce(
            (c, v) =>
              Object.assign(c, {
                [v]: { marked: true, dotColor: 'pink' },
              }),
            {},
          );
          setMarkedDates(obj);
        }
      }
    } catch (error) {
      console.error(error);
    }
  };
  useEffect(() => {
    readCalendarData();
  }, [])
  return(
      <SafeAreaProvider>
         <View>
            <Calendar
              markedDates={markedDates}
              onDayPress={(day) => {
                navigation.push('Detail', {day});
              }}
           />
         </View>
      </SafeAreaProvider>
  );
}

export default HomeScreen;

And when it works, the dots are displayed well on the dates 2023-03-30 and 2023-03-31, but the color is yellow.

And I deleted the data and saved the data to show 2023-03-30 with sky blue and saved the data to show 2023-03-31 with green.

But again this time it displays fine, but the problem is that the color is green.

Can you help me? Please help me if you can.

There's an issue with the code where the selected color for all marked dates becomes "pink" when the color is "happy-pink" or "happy2-pink". This is because the setMarkedDates function is called inside the loop and overwrites the entire markedDates object with a new object that only has the current date with its corresponding color.

To fix this issue, you can create a temporary object outside of the loop and use it to accumulate the marked dates with their corresponding colors. Then, you can set the markedDates state once outside of the loop.

Here is the updated Code:

const readCalendarData = async () => {
  try {
    const listnumber = await AsyncStorage.getItem("listnumber");
    const listnumbertoint = parseInt(listnumber, 10);
    const tempMarkedDates = {}; // create temporary object
    for (var i = 1; i <= listnumbertoint; i++) {
      console.log(i);
      const date = await AsyncStorage.getItem(i + "calendar");
      console.log(date);
      const color = await AsyncStorage.getItem(date + "calendar");
      console.log(color);
      let dotColor;
      switch (color) {
        case "happy-pink":
        case "happy2-pink":
          dotColor = 'pink';
          break;
        case "happy-yellow":
          dotColor = 'yellow';
          break;
        case "sad-skyblue":
          dotColor = 'skyblue';
          break;
        case "soso-green":
          dotColor = 'green';
          break;
        case "soso-orange":
          dotColor = 'orange';
          break;
        default:
          dotColor = 'pink';
      }
      if (!tempMarkedDates[date]) {
        tempMarkedDates[date] = { marked: true, dotColor }; // add new date to temporary object
      } else {
        tempMarkedDates[date].dotColor = dotColor; // update existing date with new color
      }
    }
    setMarkedDates(tempMarkedDates); // set markedDates state once outside of the loop
  } catch (error) {
    console.error(error);
  }
};