Convert to if/else from nested ternary in lit-html

Question

how to write below code lit html

I am new to lit html , i try to convert the below code to if/else instead of nested ternary

 render() { 
    return this.html`   
     ${this.data ? this.html`<comp data={this.data}></comp>`
                    : data1 && data1.test === 'valid' && valueCheck ? this.html`
                      <comp2 data={this.data2}  ></comp2>
                    `
                    : this.html`
                      <comp1 data={this.data1}  ></comp1>
                    `} `;}

Need to convert simple if else

Please [edit] your question to include what research you've done and what attempts you've made based on that research. — Heretic Monkey, Jul 11 '22 at 16:38

Pelicer · Answer 1 · 2022-07-11T17:28:17.273

1

I understand you want to use this to render components. Normally, when I have complex validations if/elses to do, I do them outside the render part and attribute it to a variable.

let dataToRender = undefined;
if(this.data){
    dataToRender = this.html`<comp data={this.data}></comp>`
} else if(data1 && data1.test === 'valid' && valueCheck){
    dataToRender = <comp2 data={this.data2}  ></comp2>
} else {
    dataToRender = <comp1 data={this.data1}  ></comp1>
}

And, then, on the render function simply:

render(
    ${dataToRender}
)

edited Jul 11 '22 at 17:28

answered Jul 11 '22 at 16:32

Pelicer

1,348
4
23
54

whole code in render part ,so how to add if else inside the render part. thanks for help – John Ken Jul 11 '22 at 16:36
1

Answers which explain code are usually upvoted more often than those which simply provide code. – Heretic Monkey Jul 11 '22 at 16:39
@JohnKen added more info. – Pelicer Jul 11 '22 at 17:28

Filip Seman · Answer 2 · 2022-07-15T07:11:05.623

You usually want to enumerate the value based on the logic, it's more readable and maintainable in the future if your logic grows.

You can also combine the built-in choose directive to render one of many templates based on the key value.

import { LitElement, html } from "lit";
import { choose } from "lit/directives/choose.js";

enum RenderOptions {
    COMP,
    COMP_1,
    COMP_2
}

class MyElement extends LitElement {
    // mocks
    data = {}
    data1 = { test: "valid" }
    data2 = {}
    valueCheck = true

    render() {
        return html`
            ${choose(this._conditionalRender(), [
                [RenderOptions.COMP, () => html`<comp data={this.data}></comp>`],
                [RenderOptions.COMP_1, () => html`<comp1 data={this.data1}></comp1>`]
                [RenderOptions.COMP_2, () => html`<comp2 data={this.data2}></comp2>`],
            ],
            () => html`<h1>Error</h1>`)}
        `;
    }

    private _conditionalRender(): RenderOptions {
        if (this.data) {
            return RenderOptions.COMP
        }
        if (this.data1 && this.data1.test === 'valid' && this.valueCheck) {
            return RenderOptions.COMP_2
        }
        return RenderOptions.COMP_1
    }
  }


// implementations of...
// comp
// comp1
// comp2

Convert to if/else from nested ternary in lit-html

2 Answers2