Parent Get/Set Child Property

Can a parent component somehow set a property or access the property of a child component?

export function Tab(props: {label: string}){
    return (
      <p>{props.label}</p>
    )
}

export function Tabs(props: SomeUsefulGeneric<Tab>>) {
    const kids = children(props.children)
    const labels = kids().map(child => child.label)
    // do stuff with the labels
    return (
        <Paper>
            {kids()}
        </Paper>
    )
}

export function Tab(props: {label: string}){
    return (
      <p>{props.label}</p>
    )
}

export function Tabs(props: SomeUsefulGeneric<Tab>>) {
    const kids = children(props.children)
    const labels = kids().map(child => child.label)
    // do stuff with the labels
    return (
        <Paper>
            {kids()}
        </Paper>
    )
}

11 Replies

zulu•6d ago

yes, a parent can set a child property by passing it as a prop to the child

jrainearwillsOP•6d ago

what if children are passed in as props to the parent, like in my example?

zulu•6d ago

let me think lol you can potentially use context https://docs.solidjs.com/concepts/context

bigmistqke•6d ago

you can also return an object and then parse it in the parent that's how Match works for example: https://github.com/solidjs/solid/blob/main/packages/solid/src/render/flow.ts#L250 it's a bit cursed, but it works! if you also want to use this component outside of that parent

zulu•6d ago

another pattern https://playground.solidjs.com/anonymous/a63a2335-0a08-406c-8b1e-fb1813cb454c

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

bigmistqke•6d ago

o i kind of misread op actually, you want to get the props of the children and the do something with it. that can be accomplished with the pattern i talked about before

jrainearwillsOP•6d ago

i'll check that out. i wound up doing this in the mean time, which is less idiomatic, but it works.

interface Props {
    tabs: {
        label: string,
        Tab: JSXElement
    }[]
}

export function Tabs(props: Props) {
    const labels = props.tabs.map(t => t.label)
    return (
        <Paper>
            <List>
                <For each={props.tabs}>
                    {(tab) => (
                        <ListItemButton>{tab.label}</ListItemButton>
                    )}
                </For>
            </List>
            <For each={props.tabs}>
                {(tab) => (tab.Tab)}
            </For>
        </Paper>
    )
}

interface Props {
    tabs: {
        label: string,
        Tab: JSXElement
    }[]
}

export function Tabs(props: Props) {
    const labels = props.tabs.map(t => t.label)
    return (
        <Paper>
            <List>
                <For each={props.tabs}>
                    {(tab) => (
                        <ListItemButton>{tab.label}</ListItemButton>
                    )}
                </For>
            </List>
            <For each={props.tabs}>
                {(tab) => (tab.Tab)}
            </For>
        </Paper>
    )
}

bigmistqke•6d ago

if it works, it works!

jrainearwillsOP•6d ago

ok i took a look at the playground. makes sense, a factory function.

zulu•6d ago

how does the <Tabs> decleration looks like? is it something like

<Tabs tabs={[
 {tab:<Tab label="label" />, label:"label"},
 ...
 ]}
/>

<Tabs tabs={[
 {tab:<Tab label="label" />, label:"label"},
 ...
 ]}
/>

peerreynders•6d ago

I'd be inclined to preemptively change it to:

interface Props {
    tabs: {
        label: string,
        Tab: () => JSX.Element
    }[]
}

interface Props {
    tabs: {
        label: string,
        Tab: () => JSX.Element
    }[]
}

See: https://discord.com/channels/722131463138705510/1238643925988937820/1240220490539466832 https://discord.com/channels/722131463138705510/1342563179468816404

Gaming

Programming

Parent Get/Set Child Property

Did you find this page helpful?