SolidJS•17mo ago

What is props.children really?

I'm trying to make an element that scrolls it's children automatically when mounted. This is what I have currently:

interface AutoScrollProps {
    children: JSXElement
}

function AutoScroll(props: AutoScrollProps) {
    onMount(() => {
        if (props.children instanceof HTMLElement) {
            if (document.body.contains(props.children)) {
                console.log("Element is mounted")
            } else {
                console.log("Element is not mounted")
            }
        }
    })

    return props.children
}

/* ... */

<AutoScroll>
    <div />
</AutoScroll>

interface AutoScrollProps {
    children: JSXElement
}

function AutoScroll(props: AutoScrollProps) {
    onMount(() => {
        if (props.children instanceof HTMLElement) {
            if (document.body.contains(props.children)) {
                console.log("Element is mounted")
            } else {
                console.log("Element is not mounted")
            }
        }
    })

    return props.children
}

/* ... */

<AutoScroll>
    <div />
</AutoScroll>

It actually prints "Element is not mounted". Does this mean the element that gets mounted in the DOM is a clone of props.children?

6 Replies

thetarnav•17mo ago

console log props to see in your case it’s probably a getter, so each time you read from it you run its function, and create new html elements this is why children helper exists, to resolve the children, and gives you signal that you can access multiple times

valchannOP•17mo ago

alright, i'll try that

valchannOP•17mo ago

doesn't seem to make a difference https://stackblitz.com/edit/solid-vite-xvfamp?file=src%2Findex.tsx

StackBlitz

Solid Counter TS (forked) - StackBlitz

Starter project for Node.js

thetarnav•17mo ago

you’re still reading from props.children in multiple places

valchannOP•17mo ago

oh yeah! now it works! thank you so much!

Alex Lohr•17mo ago

Children can contain JSX.Element (which on the server is an object { t: template, ... } and on the client a HTMLElement or false or null), an Array of JSX.Elements. FlowComponents like <For> can have Functions that return JSX.Element or JSX.Element[] instead as children.

Gaming

Programming

What is props.children really?