Hi, I'm trying to make a multiline text label and ...

# javascript

[Dmitriy Malayev]

Hi, I'm trying to make a multiline text label and it isn't working. Here is what I've tried.

Box {
    val paragraph = document.createElement("p")
    paragraph.textContent = "This is a paragraph."
    ReactHTML.p {
        +"""
    List commitments for responsible conduct, including:
        ABC
    The level at which each policy commitment was:
        ABC
        ABC
        ABC
"""
    }
}
Box {
    val paragraph = document.createElement("p")
    paragraph.textContent = "This is a paragraph."
    ReactHTML.p {
        +"\n                    List commitments for responsible conduct, including:\n                        ABC\n                    The level at which each policy commitment was:\n                        ABC\n                        ABC\n                        ABC\n                "
    }
}

[Mike Dawson]

I think you should check the Kotlin/MUI Showcase : https://github.com/karakum-team/kotlin-mui-showcase

Using react, you shouldn't normally be creating elements yourself. Actually, by doing that, you create a new element every time the render function runs (which can be a lot). You normally add text content to an element using +

e.g.

Box {
p {
+ "some text"
}
}

If you need line separate lines, you can use plain br elements, or an MUI stack:

Box {
p {
+ "line one"
br()
+ "line two"
}
}