[DOCK]: The argument must be React element, but you passed null!

[alamenai]

Hi,

I have Dock with 4 dock icons, the first 3 are usually visible however the fourth one is based on a condition:

 <Dock className='rounded-full border-none gap-5 backdrop-blur-3xl bg-black/50 p-2 animate-slide-up relative m-0'>
              <DockIcon
                className={cn(isDeletedAllRoofsEnaled && "bg-white")}
                onClick={() => {
                  enableDeletedAllRoofs(!isDeletedAllRoofsEnaled)
                  enablePanelSelection(false)
                  setIsResizeRoofMenuVisible(false)
                }}
              >
                <TooltipProvider delayDuration={100}>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Diff
                        className={cn("relative rounded-full text-white", isDeletedAllRoofsEnaled && "text-black")}
                      />
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Dächer hinzufügen oder entfernen</p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </DockIcon>
              <DockIcon
                className={cn(isSelectedPanelEnabled && "bg-white")}
                onClick={() => {
                  enablePanelSelection(!isSelectedPanelEnabled)
                  enableDeletedAllRoofs(false)
                  setIsResizeRoofMenuVisible(false)
                }}
              >
                <TooltipProvider delayDuration={100}>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <MousePointerSquare
                        className={cn("relative rounded-full text-white", isSelectedPanelEnabled && "text-black")}
                      />
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Dächer hinzufügen oder entfernen</p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </DockIcon>
              <DockIcon
                className={cn(roofResizeMethod && "bg-white")}
                onClick={() => setIsResizeRoofMenuVisible(!isResizeRoofMenuVisible)}
              >
                <TooltipProvider delayDuration={100}>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Scaling className={cn("relative rounded-full text-white", roofResizeMethod && "text-black")} />
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Dächer hinzufügen oder entfernen</p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </DockIcon>

              {newRoofs.length > 0 && (
                <DockIcon
                  className={cn(newRoofs.length > 0 && "bg-white")}
                  onClick={() => {
                    installPvSystem(roofs)
                    setNewRoofs([])
                  }}
                >
                  <TooltipProvider delayDuration={100}>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <UndoDot
                          className={cn("relative rounded-full text-white", newRoofs.length > 0 && "text-black")}
                        />
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>Dächer hinzufügen oder entfernen</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </DockIcon>
              )}
            </Dock>

As you see in the last one, it will be visible only when newRoofs.length>0 but it seems that the Dock component access to null which throws this error:

[itsarghyadas]

Did you try any solution?

[alamenai]

Hi @itsarghyadas , no I did not, I changed the component at all.