Conditional rendering for nested instances / components

Hello,
I have created a component Verrou linked.
I created another one component called Verrou selector that contains 3 instances of Verrou linked.
Thus 3 instances should be rendered on condition.
This condition refers to properties of the Verrou linked instance.
So I am applying the conditional rendering at the component level, however I got a message “Conditionnal rendering overwritten by instance”.

How can I fix that ?

Thank you :pray:

I didn’t understand based on what condition do you want to conditionally show or hide the Verrou linked? Is it based on the property of the Verrou selector?

Please expand on the context of this component

Sure sorry, so I have 3 text inputs further up my page (called Verrou 1, 2 and 3). Only verrou 1 is mandatory.
The user can fill one, two or three text inputs.
I want the user to be able to refer different elements in my app to these Verrous, kind of to be “binded” in my backend. So I created this Verrou selector component.
However, if the user did not filled the text input “Verrou 2” or “Verrou 3”, I do not want my instances 2 and 3 to appear in my Verrou selector component.

And I don’t succeed to apply the conditional rendering, instances overwritten. However I didn’t changed conditional rendering at the instance level.
Here is my conditional rendering formula applied to my component Verrou linked a bit gruff :

Does it makes more sense? What is the best practice to do this?
Thanks

The formula checks if there is any text in the Verrou input

What about making a prop called isVerrouActive binded to the conditional display and if the value of Verrou2 is “”(empty) you pass that as a prop?

That doesn’t work, it is still overwritten by instance.
However I simply set 3 different conditions at the instance level. If later I will add more “verrous” I will have to add the condition formula with it but it is not a big deal.
Wanting to bind everything prevented me from finding a great solution :sweat_smile: :man_facepalming:

I wanted to open this thread one more time if possible. I am not able to solve the conditional rendering in nested/bound groups.
I have a simple true/false bool and want to show or hide an element in an collection.

I tried binding the conditional rendering as well as binding the display.
When unbound/ungrouped it works fine, but as soon as I bind the elements to collection it stops working.
Any Ideas why that is?

Edit: Just found the solution in the guide provided here: Checkboxes within a collection list - #2 by peteletkemansst

This is about collection data display more than components.

But to do so you should you can add a filter on the collection like this :


But this will hide the whole line (not sure this is what you want)

Else, you can try creating an array of boolean in weweb variables (let’s say ABC). On monted or each page load (when collection is fetching) you can set this array with the boolean values of your collection.
On clicking the toggle you change to True/False item at the index item.data.index in ABC.
Then you set a conditional rendering in your Count element : ABC element at the index equals to item.data.index

Hope this can help

1 Like