1

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]]

Mandroid
  • 6,200
  • 12
  • 64
  • 134
  • 1
    The simple answer is that you call `map` on the `Seq` and create a new component for each value, and then place it in a containing component. But without knowing more details it is hard to be more specific. – Tim Oct 05 '21 at 07:47

1 Answers1

1

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

Tim
  • 26,753
  • 2
  • 16
  • 29