How should you conditionally return different child components while maintaining reactivity?

[kennycarruthers]

What is the idiomatic way to maintain reactivity and return different child components depending on the val of a state?

Imagine the components being returned are bigger such that using a ternary operator somewhere is a bit too unwieldy...

// If data.val is set elsewhere, then this is not reactive.
const ChildView = (data) => { 
  if (data.val.errors) { 
    return div(h1('Errors'), ...)
  }

  if (data.val.state === 'pending') { 
    return p('Pending...');
  }

  return div(...);
}

// Wrapping the entire thing inside `derive` maintains reactivity, but is this the correct way? 
const ChildView = (data) => { 
  return van.derive(() => {
    if (data.val.errors) { 
      return div(h1('Errors'), ...)
    }

    if (data.val.state === 'pending') { 
      return p('Pending...');
    }

    return div(...);
  });
}

One use case we're exploring is toggling the visibility of form elements based on the state of other form elements. The form is quite complex, so the individual "fieldsets" have been refactored into sub-components.

[Tao-VanJS]

Your first piece of code would just work:

const ChildView = (data) => { 
  if (data.val.errors) { 
    return div(h1('Errors'), ...)
  }

  if (data.val.state === 'pending') { 
    return p('Pending...');
  }

  return div(...);
}

Basically, to make ChildView reactive, you need to wrap it inside a binding function, see https://vanjs.org/tutorial#state-derived-child.

ParentView(() => ChildView(data))

[kennycarruthers]

Right... Perhaps I'm just confusing a few things here. The following block is more representative of what we're trying:

  const TableView = (data) => {
    // This component does not rerender when FormView sets data.val
    if (data.val.rows.length == 0) {
      return p("No rows to render");
    }

    return div(data.val.rows.map((row) => p(row)));
  };

  const FormView = (data) => {
    const loadData = () => {
      data.val = { rows: ["One", "Two", "Three"] };
    };

    return div(button({ type: button, onclick: loadData }, "Load Data"));
  };

  const ContentView = () => {
    const data = van.state({ rows: [] });
    return div(TableView(data), FormView(data));
  };

However, if we wrap TableView with derive, then it does work. Presumably we're now giving Van the context it needs to maintain reactivity...

  // This implementation is reactive when FormView calls data.val = ...
  const TableView = (data) => {
    return van.derive(() => {
      if (data.val.rows.length == 0) {
        return p("No rows to render");
      }

      return div(data.val.rows.map((row) => p(row)));
    });
  };

I guess you're saying we should be doing this:

  const ContentView = () => {
    const data = van.state({ rows: [] });

    // Wrap these inside a binding function.
    return div(() => TableView(data), () => FormView(data));
  };

That indeed works, but it means that the Parent components need to know if a Child component requires this or not. For example, in the code above, FormView doesn't really need the binding but TableView does.