SolidJS•3d ago

Default behaviour to have undefined in children?

const b = children(() => props.children).toArray();
console.log(b);

const c = children(() => props.children).toArray().filter((item) => !!item);
console.log(c);

const b = children(() => props.children).toArray();
console.log(b);

const c = children(() => props.children).toArray().filter((item) => !!item);
console.log(c);

Am I expected to filter out undefined nodes in children? I have 2 uses cases and I'm seeing undefined peppered in with other nodes. Is this the default behaviour with solidjs?

18 Replies

PaulOP•3d ago

For reference, this is my component:

<Breadcrumbs>
  <Anchor>Link 1</Anchor>
  <Anchor>Link 2</Anchor>
  <Anchor>Link 3</Anchor>
</Breadcrumbs>

<Breadcrumbs>
  <Anchor>Link 1</Anchor>
  <Anchor>Link 2</Anchor>
  <Anchor>Link 3</Anchor>
</Breadcrumbs>

REEEEE•3d ago

You shouldn't have to, are you seeing issues with it?

Madaxen86•3d ago

I think those undefined are added by Mantine as you didn’t define a separator.

PaulOP•3d ago

Nope. React only shows 3 children for the same component.

PaulOP•3d ago

Yes, if I do not remove the undefineds the resulting markup is a complete mess.

REEEEE•3d ago

How is Anchor defined?

PaulOP•3d ago

How do you mean? Also, I have 2 use cases where this shows up. For BreadCrumbs and Card. They both have children.

REEEEE•3d ago

Like does the Anchor component return multiple elements in a fragment?

PaulOP•3d ago

In react

REEEEE•3d ago

I'm just not sure where the undefined is coming from 🤔 Maybe the Box component if you already ported that. Also, what does the markup look like with the undefined?

PaulOP•3d ago

<div class="m_8b3717df mantine-Breadcrumbs-root">
  <div class="m_f678d540 mantine-Breadcrumbs-breadcrumb"></div>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <a class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover">Link 1</a>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <div class="m_f678d540 mantine-Breadcrumbs-breadcrumb"></div>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <a class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover">Link 2</a>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <div class="m_f678d540 mantine-Breadcrumbs-breadcrumb"></div>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <a class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover">Link 3</a>
</div>

<div class="m_8b3717df mantine-Breadcrumbs-root">
  <div class="m_f678d540 mantine-Breadcrumbs-breadcrumb"></div>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <a class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover">Link 1</a>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <div class="m_f678d540 mantine-Breadcrumbs-breadcrumb"></div>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <a class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover">Link 2</a>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <div class="m_f678d540 mantine-Breadcrumbs-breadcrumb"></div>
  <div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div>
  <a class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover">Link 3</a>
</div>

There are errant empty nodes:

<div class="m_f678d540 mantine-Breadcrumbs-breadcrumb"></div>

<div class="m_f678d540 mantine-Breadcrumbs-breadcrumb"></div>

REEEEE•3d ago

I see. I'm guessing this is following the Mantine Breadcrumbs implementation almost 1-1 with the loop over children and creating the elements through that? My guess is the undefined is coming from the Box component since it does "render" 2 elements in a fragment, the first of which could be undefined. So I guess technically, it is expected But it could also be a bug with fragments, I'm not too sure there

PaulOP•3d ago

Ok, so I did

<Breadcrumbs>
       <div>Anchor 1</div>
       <div>Anchor 2</div>
       <div>Anchor 3</div>
      </Breadcrumbs>

<Breadcrumbs>
       <div>Anchor 1</div>
       <div>Anchor 2</div>
       <div>Anchor 3</div>
      </Breadcrumbs>

And it shows 3 children. Looks like I need to do some debugging. Something isn't quite right. 😩 Should have done that in the beginning 😳 but when 2 components show the same thing...

REEEEE•3d ago

It's definitely the Box component I think

PaulOP•3d ago

This mantine port is not easy 😩 17 components verified out of 84 so far. 106 actually but waiting until I do a complete port of floating-ui. 😭

REEEEE•3d ago

You're porting floating-ui? You can just use the vanilla library

PaulOP•3d ago

I'm going to use https://github.com/ptrtorain/floating-ui-solid as the base. I'll vibe code what's needed at a minimum. I already made an issue. The author will be adding in the missing functionality.

GitHub

GitHub - ptrtorain/floating-ui-solid: SolidJS bindings for Floatin...

SolidJS bindings for Floating UI. Contribute to ptrtorain/floating-ui-solid development by creating an account on GitHub.

PaulOP•3d ago

Can't. Mantine demands a lot of functionality that is missing otherwise. I want an as close to 1:1 port of react.

Gaming

Programming

Default behaviour to have undefined in children?

Did you find this page helpful?