How create a Select
component from dynamically computed options
#8
Unanswered
bnussman-akamai
asked this question in
Q&A
Replies: 1 comment 1 reply
-
I think you'd need to use a string field for this, I don't think typescript will like using an enum field with non-constant values. Something like this will work (I haven't ran this exact code but this approach is possible): function Select({enumValues}:{enumValues: string[]}) {
const {field} = useTsController<string>();
return (
<select onChange={e=>field.onChange(e.target.value)}>
{options.map(e=><option/>)}
</select>
)
}
const mapping = [
[z.string(), Select],
] as const
const Form = createTsForm(mapping);
const Schema = z.object({
select: z.string(),
})
const Page() {
return (
<Form
schema={Schema}
onSubmit={(e)=>{}}
props={{
select: {enumValues}
}}
/>
)
} Thanks for bringing this up. I'm going to look into some of the enum related stuff tomorrow, starting to reconsider whether it's a good idea to have the |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Can an example be provided or can some documentation be added that shows how you would create a
<select>
component, in which, the options come from some extra async API. All of the examples I see use constant known values.Beta Was this translation helpful? Give feedback.
All reactions