show element if it has items in render function

[akeni]

in the below example:

render({elements, render, html}) {
const { element1, element2} = elements;
render(
html`<div className="container1"> ${element1} </div> <div className="container2"> ${element2} </div> ,
root);
}

I want to show div container1 if only element1 has items, and div container2 if only element2 has items. how do I achieve that in the render function in javascript?

[Haroenv]

Can I ask what the value of element1 is? Do you have a sandbox with the implementation so far?

[akeni]

Sorry I couldn't get the sandbox working as codesandbox said it couldnt import the html module in somehow..

const querySuggestionsPlugin = {
  getSources({ query }) {
    const suggestion1 = ["apple", "banana"];
    const suggestion2 = [];

    return [
      {
        sourceId: "element1",
        getItems() {
          return suggestion1;
        },
        templates: {
          item({ html, item }) {
            return html`<div>${item}</div>`;
          }
        }
      },
      {
        sourceId: "element2",
        getItems() {
          return suggestion2;
        },
        templates: {
          item({ html, item }) {
            return html`<div>${item}</div>`;
          }
        }
      }
    ];
  }
};

I have a plugin that returns getsources(),

a renderer that looks like this:

autocomplete({
  container: "#autocomplete",
  placeholder: "Search",
  openOnFocus: true,
  plugins: [querySuggestionsPlugin],
  render({ elements, render, html }, root) {
    const { element1, element2 } = elements;
    render(
      html`<div className="aa-PanelLayout aa-Panel--scrollable">
                  <div className="aa-PanelSections">
                      <div className="aa-PanelSection--section-1"> 
                          ${element1}
                      </div>
                      <div className="aa-PanelSection--section-2"> 
                          ${element2}
                      </div>
                  </div>
               </div>`,
      root
    );
  }
});

what I want to do in the render function is to display the div-PanelSection--section-1 and div-PanelSection--section-2 only when there is a result set in the elements. In this case, suggestion2 has zero results, so I don't want to show section-2

[akeni]

okay I have figured out a way to do it:

we can get the collection through render by checking the state collection and seeing if there are items in the source.

sorry the github code display is buggy due to html escape using `

render({elements, render, html, state}, root) {
    const source = 'element1';
    const hasElement = state.collections.filter(({source}) => source.indexOf(source.sourceId) >= 0).reduce((prev, curr) => prev + curr.items.length, 0) > 0;

    render(
        html`${hasElement && ( html`<div>${element1}</div>`)}, 
       root
    )
}

[Haroenv]

That's indeed correct, sorry that I didn't understand what you meant initially