[SOLVED] scalajs-react: How to loop a Seq of objects to populate UI

scalajs-react: How to loop a Seq of objects to populate UI

I am exploring scalajs-react. I have a usecase in which when a user clicks on a button, I fetch data from backend. Data is a list of objects. I need to display each object in a sort of form. So basically it would be a series of divs I assume.

So how do I iterate a Seq of custom objects and populate UI with their content in scalajs-react?

So I have tried by putting code below in an existing div:

<.div(
          this.employees.map( employee =>
            <.form(
              <.label("Name of the employee:",
                <.input(^.`type` := "text", ^.cls := "form-control",
                  ^.value := employee.name, ^.onChange ==> updateName)),
              <.br,
              <.label("Addresses:",
                <.input(^.`type` := "textarea", ^.rows := 100, ^.cols := 20,^.cls := "form-control",
                  ^.value := employee.addresses.mkString(","), ^.onChange ==> updateAddresses))
              
            )
    )
)

But this gives error: Required Tagmod, found Seq[Tag[html.form]]

Solution

It looks like you need to add .toTagMod after the map. See the Collections section in the documentation on VDOM