React Calendar Timeline doesn't show fetched data

Question

So I came to cross the problem. It is weird that the React-Calendar-Timeline component doesn't show fetched items even I know it is in the array. However, when I open inspect element, the items render as it should and everything is starting to work.

I tried solving the problem by implementing loading screen while the data is fetching, however, the problem stays the same.

Here is the timeline component code:

{!isLoading ? (
            <CalendarContainer>
              <Timeline
                groups={rooms}
                items={tenantsInCalendar} // this part is not rendering at the first time
                defaultTimeStart={startDate}
                defaultTimeEnd={endDate}
                canResize={"both"}
                stackItems
                onItemSelect={handleItemClick}
                onItemDeselect={() => dispatch(setCurrentTenant(null))}
                minZoom={24 * 60 * 60 * 1000} // min zoom is 24 hours.
                dragSnap={24 * 60 * 60 * 1000} // snap is at 24 hours.
                canMove={true}
                itemHeightRatio={0.75}
                onItemMove={handleItemMove}
                onItemResize={handleItemResize}
                timeSteps={{
                  day: 1,
                  month: 1,
                  year: 1,
                }}
              ></Timeline>
            </CalendarContainer>
          ) : (
            <Spinner />
          )}

The fetching methods:

  useEffect(() => { // converting fetched data to object for better/faster properties changement
    fetchedTenants &&
      setTenantsToObject(convertTenantsToObject(fetchedTenants));
  }, [fetchedTenants]);

  useEffect(() => { // converting tenants to other object type for calendar to understand. This data is rendered in calendar component.
    tenantsToObject &&
      setTenantsInCalendar(
        convertTenantsToCalendarObjectItems(Object.values(tenantsToObject))
      );
  }, [tenantsToObject]);

  useEffect(() => {
    if (tenantsInCalendar.length > 0 && isLoading) {
      handleTimeout(1000);
    }
  }, [tenantsInCalendar]);

  const handleTimeout = (time) => { // sets some timeout for calendar to really render data at the first time. However, still doesn't work as it should.
    setTimeout(() => {
      setIsLoading(false);
    }, time);
  };

Also, I'm adding photos, from which the first one is at the first render. The second one is when I open inspect element tool.

Answer 1

enter image description here

enter image description here

visibleItems for your case are empty array, u need to make sure items timeline from fetchApi are in the range of defaultTimeStart and defaultTimeEnd. I think u can use visibleTimeStart/visibleTimeEnd instead of defaultTimeStart/defaultTimeEnd. Or if u want to use default value here, u need to reset default values(maybe using key).