How to dynamically populate Calendar marked dates from api - React Native, redux

Question

As title said I need to populate marked dates which im getting from API in Calendar component (i am using "react-native-calendars": "^1.403.0").

enter code here : <Calendar
    markedDates={{
       "2020-09-15": { selected: true, marked: true, selectedColor: "blue" },
       "2020-09-05": { selected: true, marked: true, selectedColor: "blue" },
       }}/>

Answer 1

Solution:

 const CalendarScreen = (props) => {
  const dispatch = useDispatch();
  const access_token = useSelector((state) => state.auth.token);
  const calendar = useSelector((state) => state.calendarClasses.calendar);
  const isCalendarLoading = useSelector(
    (state) => state.calendarClasses.isCalendarLoading
  );

  useEffect(() => {
    dispatch(loadCalendar());
    dispatch(getCalendar(access_token, childId));
  }, [dispatch, getCalendar]);

  let markedDay = {};

  calendar.map((item) => {
    markedDay[item.date] = {
      selected: true,
      marked: true,
      selectedColor: "purple",
    };
  });


  return (
      <Calendar markedDates={ markedDay }
        ...
    />
}

Pay attention in component Calendar - markedDates = { } , markedDates must be in with single {}, because markedDay is object. So you cant set like it is in documentation <Calendar markedDatse={{ markedDay }} /> because this will be like markedDates= {{{ }}}.

Answer 2

You are only missing some square brackets around the date:

markedDates={{
  [day]: { selected: true, marked: true, selectedColor: "blue" },
}}