Fractal: Unable to define context of sub-components using parent component's config

[siiron]

@frctl/fractal version: 1.1.3 + @frctl/nunjucks version: 1.0.3

I love Fractal so far, but I'm struggling a bit with including sub-components via method B (define context data in the parent componet's config), documented here http://fractal.build/guide/components/sub-components#b-define-all-context-data-in-the-parent-component-s-config.

I'm using Nunjucks as my template engine, and .js files for component configs. Recreating the doc-example, I'm not able to pass in a different text to my button using the parent component's config.

{# button.njk #}
<button type="button" name="submit">{{ text }}</button>

// button.config.js
module.exports = {
    title: 'Button',
    context: {
        text: 'A Button'
    }
};

{# search-box.njk #}
<div class="searchbox">
    <label for="search">{{ label }}</label>
    <input type="search" name="keywords" id="search">
    {% render '@button' %}
</div>

// search-box.config.js
module.exports = {
    title: 'Search Box',
    context: {
        label: 'Search here',
        button: {
            text: 'Go!'
        }
    }
};

According to the documentation, I could expect the following result:

<!-- button.html -->
<button type="button" name="submit">A Button</button>

<!-- search-box.html -->
<div class="searchbox">
    <label for="search">Search here</label>
    <input type="search" name="keywords" id="search">
    <button type="button" name="submit">Go!</button>
</div>

But instead I get the text "A Button" (defined in button.config.js) in both cases:

<button type="button" name="submit">A Button</button>

<!-- search-box.html -->
<div class="searchbox">
    <label for="search">Search here</label>
    <input type="search" name="keywords" id="search">
    <button type="button" name="submit">A Button</button>
</div>

[7iomka]

Just pass the variable you defined in the configuration of the parent component
since the internal component in the parent is not a context variable property is a property of the object and the button.

{% render '@button', button %}

for less confusion, use the name of such buttonConfig

{% render '@button', buttonConfig %}

and you can pass the third parameter to the partial inheritance

{% render '@button', buttonConfig, true %}

[siiron]

@7iomka Thx! That helped a lot!

[lucasctd]

It seems to not be working anymore. How can I pass a parameter to a sub-component? I have several instances of the same component and I want to pass diferent values for each of them. How can I do it?

[LeBenLeBen]

@lucasctd If you use Nunjucks, see 7iomka comment, if you use Handlebars:

{{render '@example' partialData}}

Or to merge with component default context:

{{render '@example' partialData merge=true}}

See Using Handlebars section on https://fractal.build/guide/core-concepts/views

[lucasctd]

Thank you so much. You helped a lot. I actually have started learning Fractal and its stuff 3 days ago and need to get a stuff done today, so I am still figuring out how things work with fractal. Thanks again.

[lucasctd]

@LeBenLeBen, if you don't mind, I would like to ask you something. I am compiling my component's sass file and importing it inside my component, so it will be styled in fractal. The "problem" is if I am import this component multiple times inside another, I will have a lot of css includes in page (see the picture). Am I doing it in the right way?

[mikkelrom]

Hi @lucasctd. It's actually better to include your CSS in the head of the preview layout: https://fractal.build/guide/components/preview-layouts

Hope this helps! :slightly_smiling_face: