0

I have a top level component in my web page which aggregates other components. Now I need one component to render only when a button is pressed, i.e. a flag set in my view model. So, how should I use my top level component for this? Should I use if else condition based on the value of the flag and not include the hidden component in the top level.

toplevel.view = {
    show_comp() ? [comp1, comp2, hiddencomp] : [comp1, comp2]
}

Here I'm rendering the hidden component based on the value of show_comp(). Is this the idiomatic approach or I can do better? Also, I found in one of the caveats that the view should not return virtual dom objects like I'm returning in the above code. So, will I face issues with the above code?

Thank you

deep19
  • 81
  • 1
  • 1
  • 11

1 Answers1

3

You should be fine. A clearer way of expressing this would be:

toplevel.view = {
    return [comp1, comp2, show_comp ? hiddencomp : null]
}

The 'caveat' you mention doesn't make much sense — views must return virtual DOM objects in order to render anything: A nested component must return a single root node (with contents of your choice), and cannot return an array of nodes directly — but this is fine for top level components.

Barney
  • 16,181
  • 5
  • 62
  • 76