@Shubham27 apologies for the delay - are you still experiencing this issue?
yes @jesschow
https://docs.google.com/document/d/1JYuIX7RXVhUslCm5oRXJKj7FY2ds7r-1VIAhkn28CCM/edit
@jesschow here is the problem description that i am getting. hope it helps you understand issue that i am facing.
@Shubham27 The payload config is meant to be static. I think what you should instead do is create a custom field, possibly using the new
json
field type. You would render a custom select component that would fetch data from your endpoint and when the user submits, you add the data to the json field.
@Jarrod can you share me small example of custom select field with dynamic options or any other reference that related to it.
Does this mean I can't reference data from one source (i.e. text input) and present it in a dropdown? More info on my scenario:
https://discord.com/channels/967097582721572934/1072241616917643454/1072241616917643454Hiii @remy i'm want to render data in a select menu using custom select field
i tried from this
https://payloadcms.com/docs/admin/components#fields:~:text=%7D%3B-,Field%20Component,-When%20writing%20yourbut it doesn't store selected value in api
I managed to store the selected value with useFormFields -
https://payloadcms.com/docs/admin/hooks#useformfields. Hope that helps
thanks @remy i'll try it.
hello @remy i tried but didn't work
this is the my code can you help me
useFormFields
, not
useField
const { fields, dispatch } = useFormFields(([fields, dispatch]) => ({ fields, dispatch }))
console.log('fields', JSON.stringify(fields))
hii @remy still not working it's not storing selected value even it's not create a field
Well the rest is just react:
const handleChange = (e: ChangeEvent<HTMLSelectElement>, path: string) => {
setSelectedOption(e.target.value) // React.useState
};
<select value={selectedOption} onChange={(e) => handleChange(e, path)}>
<option>...</option>
</select>
Obviously I can't see what's happening in your reducer but using React.useState will suffice for setting the selected value in the example I've provided. I'm assuming data.fields contains the values you're expecting?
data.fields give me the all fields data.
it store only in a state right?
is it store into the api?
Hey @bhavikak! You should change your field type from
ui
to
text
π
As you have noticed, ui fields
do notstore their data in the DB. So you will want to use a field type that does, i.e. text. You can leave the rest of your config as is, using the custom component that you created!
okay @Jarrod i'll try
so i need to change only type?
Yeah, and personally I think you could get away with using
useField
hook, and passing the path from props to that hook and using the
setValue
function to set the value of the field instead of the useFormFields
wohooo it's working with useFormField as well so i need to changed with usefield
thanks a lot @Jarrod @remy π
Absolutely, maybe I'll make a vid on custom components like the one you made π€
yes, you canπ€
hii @Jarrod when i select the item it's not enable publish button
Can you log Form state for me? Using useFormFields?
yaa
This is also the case for me. It persists in draft saves but doesn't trigger a change
And just to clarify, you are both using
useField
?
I haven't updated mine from
useFormField
but i'm happy to follow along for @bhavikak 's issue.
yes @Jarrod i'm use useFormField
nope
@bhavikak can you use useField instead?
Otherwise
useForm
exposes a
setModified
function that you can use to set the form as modified
i tried with usefield as well but it's not save my selected option
this is the my code
hello @Jarrod
i'm waiting for your respone.
I think Jarrod wants you to convert to
useField
first
When I get to reimplementing this, I'll create a new thread, as we're quite far from the original issue.
hii @remy i tried it but it's not store value into the colliction api
hello @remy my functionality is still pending can you suggest how i complete it using useField
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.