#bmizerany1234
crimson cairn
Hello 👋
Are you seeing an error instead? Or is it just not doing anything?
crimson cairn
huh weird. In your code you're setting default value to World
In the video, the value is diff. Is that expected? Like are you setting it to random characters intentionally?
sudden hill
I had it as World at first, and if I manually cleared/changed the field input and clicked "Reset" nothing happened, but I expected to see the text field change back to "World". I then changed it to "" from "World" to see if that changed anything, the same way swaping the 1 and 2 in 1 + 2 might change the outcome
As you can guess, the outcome was the same; the expected thing did not happen and nothing about the TextField changed.
crimson cairn
In onPress callback, can you put a console.log and see if that callback itself is getting called or not?
crimson cairn
Gotcha. Hmm, thinking
cloud harnessBOT
sudden hill
Okay. Full code and video demo: ```import * as React from "react";
import * as StripeContext from "@stripe/ui-extension-sdk/context";
import * as StripeUI from "@stripe/ui-extension-sdk/ui";
const App = (c: StripeContext.ExtensionContextValue) => {
const [name, setName] = React.useState("World");
return <>
<StripeUI.TextField name="name" label="Name" defaultValue={name} />
<StripeUI.Button onPress={() => {
console.log("hello", name);
setName("World");
}}>Reset</StripeUI.Button>
</>
};
export default App;```
NOTE: The "name" logged is always "World"
It's not .... Reacting .. 🥁
How does discord not have a highhat emoji
crimson cairn
I believe you need to use value param here since you're using a button click
The example in the docs is using onChange event
so if you use value with onChange then it makes it a controlled component
sudden hill
updated ```import * as React from "react";
import * as StripeContext from "@stripe/ui-extension-sdk/context";
import * as StripeUI from "@stripe/ui-extension-sdk/ui";
const App = (c: StripeContext.ExtensionContextValue) => {
const [name, setName] = React.useState("World");
return <>
<StripeUI.TextField value={name} name="name" label="Name" defaultValue={name} />
<StripeUI.Button onPress={() => {
console.log("hello", name);
setName("World");
}}>Reset</StripeUI.Button>
</>
};
export default App;```
Now nothing happens when I type
the pauses there are my typing into the text box expecting to see it change
ah I had that
at one point. trying the onChange again
okay that works
however
there is a lag when typing
and keyrepeat does not work
crimson cairn
Are you using the same code you shared above?
I wonder if it is because you're using name variable as defaultValue too
If you look at the example in the docs
https://stripe.com/docs/stripe-apps/how-ui-extensions-work#use-uncontrolled-components-for-interactions
It uses diff variable for defaultValue and diff variable to store changes from the text field
sudden hill
oh weird okay will try not using the default
ha okay
import * as StripeContext from "@stripe/ui-extension-sdk/context";
import * as StripeUI from "@stripe/ui-extension-sdk/ui";
const App = (c: StripeContext.ExtensionContextValue) => {
const [name, setName] = React.useState("World");
return <>
<StripeUI.TextField value={name} name="name" label="Name" defaultValue={"Test"} onChange={(e) => setName(e.target.value)} />
<StripeUI.Button onPress={() => {
console.log("hello", name);
setName("World");
}}>Reset</StripeUI.Button>
</>
};
export default App;```This is fun^
Setting the defaultValue to "test" (I think) triggers the onChange which calls setState("World") and so it "defaults" to "World"
I 🖤 React
Wait that is wrong
I think it's "value" that is picking up "World" from the useState... I guess that means defaultValue is no longer used/ignored/irrelavent/overriden?
NOTE: The "types" are pretty complainey about the value field being used:
velvet trail
👋 Stepping in for my teammate. Give me a few minutes to catch up please!
lone lodge
Hi @sudden hill 👋
I know you shared your code but it still isn't clear to me what exactly you are trying to achieve here. What is the specific action you are trying to build?
I've got a basic Text field and button that changes the value in a test integration that is currently running. Here is how I'm achieving that:
const App = ...
const [code, setCode] = useState<string>('');
const clearCode = () => {
setCode('');
}
<TextField name="code" label="Code" defaultValue={code} onChange={(e)=> {setCode(e.target.value)} }/>
<Button onPress={clearCode}>Clear Code</Button>
...
yeah that is what I have now
but the defaultValue isn't needed
change default value to defaultValue={"I AM IGNORED"} and observe you never see that rendered
leave everthing else as-is
lone lodge
My input does exactly what I expect it to so I have no interest in changing anything
sudden hill
it's just an observation
that's an odd reponse from you
Sorry that wasn't landed as helpful
lone lodge
I don't see the purpose of changing things away from a situation this is functional to achieve something that is less functional.
FWIW I did update my <TextField> with defaultValue{"code"} and now it's a static string. It does not seem to be ignored
sudden hill
Odd. I don't see it have an effect on anything. I wonder what I'm doing wrong
lone lodge
Do you have both value and defaultValue?
My VS Code told me to replace value with defaultValue
Can you try using just defaultValue and see if that does what you are looking for?
sudden hill
Happy to
import * as StripeContext from "@stripe/ui-extension-sdk/context";
import * as StripeUI from "@stripe/ui-extension-sdk/ui";
const App = (c: StripeContext.ExtensionContextValue) => {
const [code, setCode] = React.useState<string>('');
const clearCode = () => {
setCode('');
};
return <>
<StripeUI.TextField name="code" label="Code" defaultValue={code} onChange={(e) => { setCode(e.target.value) }} />
<StripeUI.Button onPress={clearCode}>Clear Code</StripeUI.Button>
</>
};
export default App;```Clear does nothing
no logs and textfield stays the same
lone lodge
Hmmm... 🤔
- Do you start with an empty text field
- Can you enter information in it?
- If you render the
codetext value does it match what is in the TextField?
sudden hill
Trying but new turn of events: suddenly I have to accept some TOS change? It isn't picking up that I accepted though.. I guess..?
lone lodge
What change did you make to your code?
sudden hill
log lines ``` <StripeUI.TextField name="code" label="Code" defaultValue={code} onChange={(e) => {
console.log("changed:", e.target.value);
setCode(e.target.value)
}} />
<StripeUI.Button onPress={() => {
console.log("clearing code:", code);
clearCode();
}}>Clear Code</StripeUI.Button>
then ran stripe apps start
got some jazz about needing to accept the TOS
lone lodge
What happens if you move the console.log statement to inside the clearCode() function call.
sudden hill
Do you think adding the log lines is what caused Stripe to change from running my app to asking to accept new TOS and then not pickup that I accepted them?
Ah ha! It seems to running now. I guess the polling for state change got a little wedged somewhere along the line. Trying the code above now, unchanged.
Moving the log line as you suggested makes zero difference in behavior:
lone lodge
Okay so the setCode still isn't appearing to return the code variable to an empty string
sudden hill
It seems so
If I change defaultValue={code} to value={code} it works (but with TS warnings)
lone lodge
Okay now I'm just mad at React
sudden hill
It's a trash fire. I don't blame you.
lone lodge
What do you get when you run stripe apps version?
sudden hill
stripe apps
version: 1.5.12
git-sha: f34bd28
build-time: 2023-09-07 18:23:38 +0000 UTC
blaketopvm% ```Hmmm...okay I'm running an older version. I'll try to update mine and see if I get a similar issue
sudden hill
Thank you for your help!
cloud harnessBOT
lone lodge
Okay....that's weird. I now see something kinda similar
So I have a <Box> element that is displaying the value of code in my UI
<TextField name="code" label="Code" defaultValue={code} onChange={(e)=> {setCode(e.target.value)} }/>
<Button onPress={clearCode}>Clear Code</Button>
<Box>
{code}
</Box>
When I click the button, the value in the Box is cleared but not the TextField
lone lodge
But when I use value instead of defaultValue it does clear both
sudden hill
I feel like this may be something odd in the component
If you want to keep spiking in that direction, I'll try TextArea, Select, etc and report back
I see the same in TextArea that I see with TextField: Clear will clear the state (as logged by console.log("clearing..) but not the textfield
Same for Select
If I change them from defaultValue={code} to value={code} it works as expected
sudden hill
Hrm.
lone lodge
I have raised this question internally but for now I would suggest you just ignore the TypesScript comlaint and use value
sudden hill
Thank you
lone lodge
Happy to shed what 💡 I can 🙂 and share in the React confusion 😅
sudden hill
I am now wondering how to find the default option/value of a Select. It seems onChange isn't trigged for it on first render. Know of the top of your head of should I start a new thread?
lone lodge
I don't know off the top of my head but onChange should only fire when the value mutates. I"m guessing the first render doesn't quality. Are you not using a stateful variable?
sudden hill
I have a fixed <Select> with fixed options. I'd like to capture whatever the default option presented to the user is without having to set of duplicate that value in defaultValue if possible
basicailly just do what a <form> and <select> would do in html, just like in the good old days
lone lodge
I think the only option there would be to include a Null value that the user needs to update to select an option
That would trigger the onChange event
lone lodge
It's not the option I would like either but that seems to be the behavior of the component.
sudden hill
thank you again
sudden hill
wait don't close this out yet
I may have an update but my VM just died as I noticed something and now I need to reboot to test... one min
ha
obsidian hatch
Hello! I'm taking over and catching up...
Snufkin had to step away, but I can try to help if I can, although I'm not a React developer. 😅