So I am wanting to produce text content of varying nature to help structure the CMS a bit and provide a bit more insight to the user. It seems that the UI type doesn't allow me to pass props into it.

Here is my collection config:

{
      name: 'description',
      type: 'ui',
      admin: {
        components: {
          Field: FieldContent("hello")
        }
      }
    },

And here is the component, it's very basic right now because I'm just trying to get it wired up:

import React, {useState} from 'react';

import './index.scss';

const baseClass = 'customer-orders';

const FieldContent: React.FC = (props) => {  
  const text = props.text;

  return (
    <div className={baseClass}>
      {text}
    </div>
  );
};

export default FieldContent;

jarrod_not_jared
last year
You should say Field: () => FieldContent({ text: “hello” }) 🙂
kaspartrlast year
Can you access document or data in the Field argument also?

e.g. the following data is undefined but is it possible to pass in document data to custom component?

Ala in the following fashion
```
Field: ({ data }) => MyComponent({value: data.myFieldValue})
```
jarrod_not_jared
last year
For that you would want to use the react hooks we expose to get the value of the field you want, read about our hooks here
https://payloadcms.com/docs/admin/hooks
kaspartrlast year
Thank you, this works
and
its reactive. Good stuff 🙂
johnrisby12 months ago
I've just found this thread because I needed to do the same, and that works great except I'm having to manually pass the name, path and label to the component - can I send the custom props as additional props to the standard ones? (in this particular case, I'm extending a text field so using TextFieldType and extending that with my additional props. If I can't do it exactly that easily, inside the field definition instead of having to write out {name: "nameoffield", label:"labeloffield" ... etc, is there a way to set them there dynamically? thanks

jarrod_not_jared

12 months ago

@johnrisby Yeah should work just like this:

Field: (fieldProps) => MyComponent({ ...fieldProps, myCustomProp: 'some-value' })

Then in your custom component you could do:

const { myCustomProp, ...rest } = props

// render Input component and pass `rest` props
// <Input {...rest} />

or you could key them onto something else like this:

Field: (fieldProps) => MyComponent({ fieldProps, myCustomProp: 'some-value' })

Then in your custom component you could do:

const { fieldProps, myCustomProp } = props

// render Input component and pass `rest` props
// <Input {...fieldProps} />

johnrisby12 months ago
that works perfectly, thanks Jarrod!

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.