Почему прохождение Map.Entries () Итератор в качестве детей в совокупный от Shadcn ничего не делает, если я не обернут е ⇐ Javascript

[Anonymous]

Я использую shadcn/ui с Codix UI Complassible , чтобы создать раздел складного фильтра.

Код: Выделить всё

import { ReactNode, useEffect, useState } from "react";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
import { Button } from "./ui/button";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

export function CollapsibleFilter({
title,
children,
tmp,
}: {
title: string;
children: ReactNode;
tmp?: any;
}) {
const [open, setOpen] = useState(false);
useEffect(() => {
console.log("children", children);
console.log("tmp", tmp);
}, [open]);
return (



{title}




{children}


);
}

Теперь на моей странице я пытаюсь рендерировать детей с карты :

Код: Выделить всё

import { CollapsibleFilter } from "@/components/collapsible-filter";
import { useEffect, useState } from "react";

export default function Home() {
const [mapObj, setMap] = useState();
useEffect(() => {
setMap(new Map([["John", "abc"]]));
}, []);
return (


using Array.from(map.entries())

{Array.from(mapObj?.entries() ?? []).map((kv) => {
return (

name:{kv[0]}
tag:{kv[1]}

);
})}


using

Код: Выделить всё

map.entries()

{mapObj?.entries().map((kv) => {
return (

name:{kv[0]}
tag:{kv[1]}

);
})}


outside of collapsible filter
{mapObj?.entries().map((kv) => {
return (

name:{kv[0]}
tag:{kv[1]}

);
})}

);
}

Что странно:
в test1 (

Код: Выделить всё

Array.from()

), элементы рендеринг.

Код: Выделить всё

mapObj.entries()

напрямую), ничто не видно внутри складных.
Но если я возьму то же самое {

Код: Выделить всё

mapObj?.entries().map(...)

} выражение вне
это работает.
Вот как он выглядит в браузере:


Подробнее здесь: https://stackoverflow.com/questions/797 ... e-from-sha