Hello,
I want to customize the
RowLabel
of a
relationship
field to display the title and subtitle of the collection item it is related to
My issue is that
data
from
RowLabel: ({ path, data, index }) => {}
only contains for example
Object { id: "6438e283fbaec9259f48dde3", projects: "6438d9306be920572b3b8a59" }
And i'd like to access the data of the project it points to
But i cannot figure out if it's possible to raise the
depth
somewhere to achieve that
My understanding is that i cannot use the local API in a react component, and therefore cannot use
import payload from 'payload'
is that correct?
For now i have the following snippet that works but i am using a
GET
to fetch the data from the project and it doesn't feel right
Is there a better way to do this?
admin: {
components: {
RowLabel: ({ path, data, index }) => {
const [title, setTitle] = useState(null);
const [subtitle, setSubtitle] = useState(null);
console.log(payload) // returns an empty function
useEffect(() => {
axios.get("http://localhost:3000/api/projects/"+data.projects).then((res)=>{
setTitle(res.data.title)
setSubtitle(res.data.subtitle)
})
}, [data])
return <><span style={{color:"gray"}}>{`Project ${String(index).padStart(2, '0')}`}</span> <b>{title}</b> {subtitle} </>
}
@wsz I think this is the right approach. This is exactly why we exposed the ability to render custom react components with RowLabel. You could narrow you useEffectHook dependency to just
data.projects
also 👍
thanks 👍
Sorry if dumb follow up question :
If I use NextJS with Payload, i could use the local api (
payload.find(), payload.findByID()
, etc..) on these components? That's the whole point right?
payload
methods can only be used on a server, not on the frontend
so you could use them in a RSC, but not a client component
but in this case, you will be writing a client component so you will need to use fetch
got it tyvm
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.