Getting error in rx.foreach

[xFarzin]

im getting this error on my component with the skill bar function. the skill bar func is doing great without rx foreach's but when i put it in this code its getting me error

Code :
def skills_section() -> rx.Component :
skillCats,skills = database.getSkills()
return rx.hstack(
rx.foreach(
skillCats,
lambda cat: section_card(
rx.flex(
rx.flex(
rx.icon(config.icons.get(cat), size=24, color="#0398F6"),
rx.heading(cat, size="6", color="white"),
align_items="center",
gap="12px",
margin_bottom="24px",
justify="start"
),
#SkillBars...
rx.fragment(
rx.text("Hi"),
rx.foreach(
skills.get(cat,[]),
lambda sk: funcs.skill_bar(sk),
),
)
),
cat,
(State.hovered_section != "") & (State.hovered_section != cat),
"medium",
),
),
width="100%",
)

Skill Bar :
def skill_bar(skill) -> rx.Component: #[name,level,category]
return rx.box(
rx.flex(
rx.text(skill[0], color="#d1d5db"),
rx.text(f"{skill[1]}%", color="#22d3ee"),
justify="between",
margin_bottom="8px"
),
rx.box(
rx.box(
width=f"{skill[1]}%",
height="8px",
background=config.colors.get("programming"),
border_radius="4px",
transition="width 0.5s ease"
),
width="100%",
height="8px",
background="#374151",
border_radius="4px"
),
margin_bottom="16px"
)

error :
[Reflex Frontend Exception] Fragment_5330e272d2d3d3e0e197bedd59de6a62/<.children<.children<.children<.c hildren<.children<.children<@webpack-internal:///(pages-dir-browser)/./pages /index.js:756:73 Fragment_5330e272d2d3d3e0e197bedd59de6a62@webpack-internal:///(pages-dir-bro wser)/./pages/index.js:682:31 react-stack-bottom-frame@webpack-internal:///(pages-dir-browser)/./node_modu les/react-dom/cjs/react-dom-client.development.js:22429:20 renderWithHooks@webpack-internal:///(pages-dir-browser)/./node_modules/react -dom/cjs/react-dom-client.development.js:5758:40 updateFunctionComponent@webpack-internal:///(pages-dir-browser)/./node_modul es/react-dom/cjs/react-dom-client.development.js:8019:19 beginWork@webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/c js/react-dom-client.development.js:9684:18 runWithFiberInDEV@webpack-internal:///(pages-dir-browser)/./node_modules/rea ct-dom/cjs/react-dom-client.development.js:544:16 performUnitOfWork@webpack-internal:///(pages-dir-browser)/./node_modules/rea ct-dom/cjs/react-dom-client.development.js:15045:22 workLoopSync@webpack-internal:///(pages-dir-browser)/./node_modules/react-do m/cjs/react-dom-client.development.js:14871:58 renderRootSync@webpack-internal:///(pages-dir-browser)/./node_modules/react- dom/cjs/react-dom-client.development.js:14851:11 performWorkOnRoot@webpack-internal:///(pages-dir-browser)/./node_modules/rea ct-dom/cjs/react-dom-client.development.js:14385:44 performWorkOnRootViaSchedulerTask@webpack-internal:///(pages-dir-browser)/./ node_modules/react-dom/cjs/react-dom-client.development.js:15932:24 performWorkUntilDeadline@webpack-internal:///(pages-dir-browser)/./node_modu les/scheduler/cjs/scheduler.development.js:44:56

[Sam-r-ai]

Yeah this looks like one of those vague React-style render errors that usually means something deep in the component tree is returning None or a malformed structure when it shouldn't. Since it only happens when you introduce the rx.foreach inside the fragment, it's probably choking on a missing key, invalid child, or None being returned from funcs.skill_bar(sk) for some entries.

It could be one of these:

The skills.get(cat, []) is returning something weird (like None instead of a list).

One of the skill_bar outputs might not be a valid Reflex component.

Reflex is being picky about rx.foreach inside rx.fragment.

Try throwing in some guards like checking if skills.get(cat) and maybe log each sk inside the lambda to see if something looks off. You could also test by temporarily replacing funcs.skill_bar(sk) with a simple rx.text("Test") to isolate whether the issue is with skill_bar or the data being fed in.