https://kotlinlang.org logo
Join Slack
Powered by
Hi everyone, I'm having an issue trying to update ...
# javascript
f
Hi everyone, I'm having an issue trying to update a text field value using the React Wrapper, what I want to do works on JS but I can't make it work on Kotlin/JS, if anyone can give me a hand it'd be greatly appreciated as I've been hitting a wall for several hours 😕 The details of the problem are on this issue: https://github.com/JetBrains/kotlin-wrappers/issues/298
c
This is a shot in the dark but maybe try adding 
get() = definedExternally; set(value) = definedExternally
to the 
var value: String
in your interface? That's the only thing I can see that looks different from the wrappers I've made for other js libraries before
f
Hi @chadmorrow, thanks for the answer, when I try to add that I get the following compilation error:
Copy code
Only nullable properties of external interfaces are allowed to be non-abstract
Should I make the interface non external?
c
no, just make 
value
nullable
like 
var value: String? get() = definedExternally; set(value) = definedExternally
f
Ok will try that, that value it non-nullable though as explained on the library's specs, won't that make it likely that NPEs could happen if it's called with 
null
?
I just tried it and the issue remains 😞
c
Dang
f
I added a new comment to the issue
c
can you share the component code?
f
Yup, it's a lot of code but let me see if I can clean it up and share it
c
is the component a class or a FunctionalComponent type?
f
It's a class
c
oh, never mind. i'll wait to see the actual code
i
I can’t see updating of state in Kotlin/JS sample You can write functional component exactly as in js sample (https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-react/README.md#creating-a-react-function-component-with-kotlin) or you can write class component with state
f
Yes the example I shared in the issue was simplified @Ilya Goncharov [JB], I'll try to share the full code shortly
i
In fact seems you need 
onChange
props in your interface
c
man, i can't believe i didn't notice that
i
And you can check it out, some notes about react hooks in Kotlin/JS You can even write 
var value by useState(“”)
And the to use it as simple var, not as pair 
value
and 
setValue
https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-react/README.md#the-usestate-hook
🎉 1
f
I just shared the full code in the issue guys
Thanks for those links @Ilya Goncharov [JB], I'll have a quick look
Regarding the hooks, I would like to keep my components as classes rather than functional components, as I find it cleaner to have separate classes for each component. But if the only way to solve my issue is through hooks then I'm keen to change it.
One difference you'll notice is that while the JS example I shared is just one component I'm actually using 2 components in Kotlin/JS and the 
value
in 
TextField
is actually set through a property rather than directly through its 
state
, but that should be fine as the value passed to the property is in the state of the parent component.
Btw, regarding the 
onChange
property, that is in the full code I shared on the issue @Ilya Goncharov [JB]
Hey @chadmorrow, did you have a chance to see the full code? Do you have any insights on what might be wrong?
c
checking now
f
Thanks 🙂
@Ilya Goncharov [JB] I tried to use the 
var resultSelected by useState("")
but I get the error:
Copy code
Type 'Pair<TypeVariable(T), RSetState<TypeVariable(T)> /* = (TypeVariable(T)) -> Unit */>' has no method 'getValue(Nothing?, KProperty<*>)' and thus it cannot serve as a delegate
Just FYI, I just tried this using `FunctionalComponent`s and the issue remains
c
I actually get that same error in the project I'm currently working on when trying to use the delegation syntax for usestate
@Franco are you getting any illegal cast errors in the console by the way?
f
yup I am @chadmorrow
c
ok that's a problem i have too. casting event.target.value to HTMLInputElement doesn't work sometimes and I think it has to do with what the framework is emitting on events.
f
Sorry not getting cast errors @chadmorrow, but I'm getting this error:
Copy code
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: <https://fb.me/react-controlled-components>
Were you able to find anything from the code I shared @chadmorrow?
c
haven't had a good time to focus on it. i can take another look in about two hours
f
No worries, I'm trying something else now, will let you know if that fixes it
Yup, I finally fixed it. Such a dumb thing. I think this is what @Ilya Goncharov [JB] was referring to in one of his first comments but I misunderstood what he said. Given that the 
TextField
becomes "controlled" because I'm setting the 
value
I have to update the value inside the 
onChange
callback. I was using this callback to send the value up to the parent component but I was not updating the text field state. Thanks for the help @chadmorrow and @Ilya Goncharov [JB]!
i
About delegating on useState seems on old kotlin-react version, what do you use?
f
I'm using 
pre-104
but I also tried 
pre105
and the same error appeared.
i
Thank you, I’ll check it
f
Thanks @Ilya Goncharov [JB] 👍
i
Hmm, that’s strange 😞 It works for me
t
Imports required 🙂
Copy code
import react.getValue
import react.setValue
👍 1
Required while #299 not merged
👍 2
6 Views
Open in Slack
PreviousNext
Powered by