Key not getting passed in children array for ReactComponents about scalajs-react HOT 15 CLOSED

Could you paste the error message you're seeing?

from scalajs-react.

I did some more digging and it's because we wrap the props value { val v: A }, so nothing on the object gets directly exposed to be picked up by the child. I am honestly not sure how this ever worked, it probably didn't.

Each child in an array should have a unique "key" prop. Check the render method of ApplicationTable. See http://fb.me/react-warning-keys for more information.

from scalajs-react.

Ah, try S.map(f => ApplicationItem(f)).toJsArray and make sure your checkout of this lib includes 5cdd6e0.

from scalajs-react.

I tried that a couple times, couldn't get it to compile. My understanding is that function is oriented at dom elements vs reactcomponents

I get an error something like this:

Cannot prove that japgolly.scalajs.react.ReactComponentU[fe.models.PApplication,Unit,Unit] =:= japgolly.scalajs.react.vdom.ReactVDom.TypedTag[japgolly.scalajs.react.vdom.ReactOutput].

from scalajs-react.

If I do something like this (warning ugly) it works:

      S.map { f =>
        val ai = ApplicationItem(f)
        ai.asInstanceOf[js.Dynamic].props.key = f.id
        ai
      }

from scalajs-react.

A good example of this pattern is here: http://jsfiddle.net/3Vs3Q/light/

from scalajs-react.

Can you humour me and try .asJsArray instead of .toJsArray?

Separately though, yeah there's no mechanism to set .props.key yet. If it's necessary, your hack will have to do for now and I'll put some friendly support in soon.

from scalajs-react.

I tried that too, tbh I am having some trouble following the types, I kinda feel like I still don't grasp it all yet.

It seems that there is some special handling for certain props (children, key) that are messing up the model. Would it make sense to just flatten out the props directly on the object? Then that would give the niceties of being able to use JSExport to map directly to fields... Separately I am also running into issues not being able to easily put functions on the spec directly =) Especially if mixins expect a function to be somewhere.

from scalajs-react.

Yeah, I'm a similar boat 😀 I'm don't even know what JSExport is or does, sounds promising though! I'll have a proper look at that over the weekend (thanks for pointing it out).

Most of what we're talking about here seems to come under the interop umbrella. Scala components talking to Scala components wouldn't use React mixins for example. That whole interacting-with-JS-components space hasn't received much attention yet. It will eventually; I'll probably even start using react-bootstrap myself once I start using this stuff for real.

To get back on topic though, cheers for the demo fiddle. I'll give that a look over the weekend.

from scalajs-react.

Hey Dan, just pushed a commit for this, you can now give a component a key when you create it and under the covers, it gets put on this.props.key.

from scalajs-react.

Works perfect thanks!

from scalajs-react.

Great to hear it

from scalajs-react.

Hi ,
i am facing similar issue in 0.5.1

here is my code

  val ProductCategoryRow = ReactComponentB[String]("ProductCateoryRow")
    .render(cateory => tr(key := cateory)(
    th(cateory)
  )) .build

val ProductTable = ReactComponentB[List[Product]]("ProductTable")
    .render(products => {
    val rows = products.map(p => ProductCategoryRow(p.category))
    table(
      thead(
        tr(
          th("Name"),
          th("Price")
        )
      ),
      tbody(
        rows
      )
    )
  }).build

I tired toJSArray and asJSArray , but still key is not added to child component

Each child in an array should have a unique "key" prop. Check the render method of ProductTable. See http://fb.me/react-warning-keys for more information. 

Thanks in advance

from scalajs-react.

Hi @chandu0101, I believe the info in #27 should solve your problem. Give that try and let me know how it goes.

from scalajs-react.

it worked thank you :)

from scalajs-react.