Child Components (slots) with Props

SimonHenz97

Re: The best way to pass children like in React

I'm really looking for a way like this to call children in a different Component.
The only diffence between my use case and the topic above is the fact that I need to call a component with props
Currently the props I give my child don't carry over to the component itself

{{#componentWithChildValue "wrapper"}}
    {{{component "c1" prop="A"}}}
{{/componentWithChildValue}}

Something like this doesn't work prop is undefined in the wrapper component

Is there a way to change the function to also carry over the props?

async function componentWithChildValue(name, opts) {
    const childValue = await jsreport.templatingEngines.waitForAsyncHelper(opts.fn()) 
    return component.call({
        ...opts.data,
        value: childValue
    }, name, opts)
}

admin

Could you share a playground demo? I am not sure I understand you.

Something like this doesn't work prop is undefined in the wrapper component

How the prop would even make it up to the wrapper component?

SimonHenz97

Looks like I found my issue.

Inside the componentWithChildValue context this is not available but @root is which means I need to use @root to send data to the child components since those don't inherit the context.

I made a playground to show exactly what I mean: https://playground.jsreport.net/w/SimonHenz97/j6brgA8X

But my Issue is solved by using @root.

admin

Passing opts.fn(this) should be the fix

const childValue = await jsreport.templatingEngines.waitForAsyncHelper(opts.fn(this))

https://handlebarsjs.com/guide/block-helpers.html#basic-blocks