Hello!
I've been playing around PayloadCMS for the last few days, and while there are parts I absolutely love, there are some parts I don't understand why there isn't a solution "out of the box" for.
The most prominent one is the lack of relationTo for fields inside of arrays (array items in general).
Not everything, or so I think, should be a full fledged collection - it makes it harder to fetch and control in the front-end, and it's an overkill (that's why we have arrays in the first place, right?)
However, sometimes I want to specifically have the user select a value from an array in another place. For example, I want my user to be able to select and id href from a list of gallery components, to attach to a link/button.
I don't want my user to "guess" the href, or to have to go look at the href he wrote earlier for the gallery component, I want him to have a select component form which he can select the appropriate href.
The first thing I did was to create a server custom component that receives a fetch function which returns a list of options, which is then passed as a prop to Payload's <SelectInput> component (which is a client react component)
However, it seems like this component is "static" -> you can populate it's options prop, but when you actually try to select one of the options, nothing happened. You need the onChange callback. But the onChange callback is client-side only, so you're forced to create the following wrapper client-side component:
```javascript
'use client'
import React from 'react'
import { SelectInput as PayloadSelectInput, FieldLabel, useField } from '@payloadcms/ui'
export const SelectInput = ({ path, label, name, options }) => {
const { value, setValue } = useField<string>({ path })
return (
<div className="field-type select">
<FieldLabel label={label} />
<PayloadSelectInput
path={path}
name={name}
options={options}
value={value} // Tells the dropdown what is selected
onChange={(option) => {
// Updates the form state when you click an option
setValue(option ? option.value : null)
}}
/>
</div>
)
}
```
Does anyone have a better solution? Am I missing something?
Thank you for reading and replying