Comments (15)
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.
Related Issues (20)
- Export `assertOuterHTML` HOT 1
- Deprecate `Mounted` component types HOT 2
- Add default arg to `ReactTestUtils.withRendered` HOT 1
- ScalaFnComponent is anonymous HOT 2
- Consider using `DocumentFragments` in `ReactTestUtils` HOT 1
- Re-evaluate `ComponentDom` post- React 18
- Is there a way to integrate Components with cats.effect.Ref? HOT 1
- Ref not always set HOT 2
- Syntax to integrate `useContext` with context function in Scala 3 HOT 1
- Compilation fails in Scala 3 when deriving Reusability for case classes with multiple parameter groups HOT 1
- Missing getDerivedStateFromError
- Missing / misspelled packages in MODULES.md HOT 1
- Add support for Discussions tab in Github HOT 1
- Modern testing recipe?
- Cannot mix static and dynamic routes even if conditional
- A minimal setup fails with Scala 3 HOT 5
- Provide default IO/SyncIO error handler for component
- ScalaFnComponent doesn't include displayName HOT 1
- Another way to define hook components
- AsyncCallback + cats, gracefully handling errors with EitherT: unexpected behaviour HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scalajs-react.