These are chat archives for chandu0101/scalajs-react-components

8th
Apr 2018
Roberto Leibman
@rleibman
Apr 08 2018 23:06

Stupid question... I've been hitting my head on this all weekend... How do I insert into a component that takes VDomNode children a mapped array... I want something like this:

            <.div(
              <.h2("Ingredients"),
              SuiTable()(
                SuiTableBody()(
                  (recipe.ingredients.zipWithIndex.map { case (ingredient, index) =>
                    SuiTableRow()(
                      SuiTableCell()(<.span(IngredientComponent(StateSnapshot(ingredient)(onIngredientChange(index)), s.unitOptions)())),
                      SuiTableCell()(<.span("Delete")),
                      SuiTableCell()(<.span("UpDown"))
                    )
                  })
              ))

I've tried a variety of casts, toTagMod, : _*, etc and nothing satisfies it, the errors are along the line of:

error] [E1] src/main/scala/components/RecipeEditor.scala
[error]      type mismatch;
[error]       found   : Seq[japgolly.scalajs.react.JsComponent.UnmountedWithRoot[scala.scalajs.js.Object,japgolly.scalajs.react.JsComponent.MountedWithRoot[[A]A,scala.scalajs.js.Object,Null,japgolly.scalajs.react.raw.React.Component[scala.scalajs.js.Object,Null],scala.scalajs.js.Object,Null],scala.scalajs.js.Object,japgolly.scalajs.react.JsComponent.MountedWithRoot[[A]A,scala.scalajs.js.Object,Null,japgolly.scalajs.react.raw.React.Component[scala.scalajs.js.Object,Null],scala.scalajs.js.Object,Null]]]
[error]       required: japgolly.scalajs.react.vdom.VdomNode
[error]      L153:                  (recipe.ingredients.zipWithIndex.map { case (ingredient, index) =>
[error]      L153:                                                       ^