Condition not working

[mystic fossil]

v3
I'm trying to show a custom message when the hero type is selected as "none" but the UI is showing regardless what the value is

// ...
      type: 'tabs',
      tabs: [
        {
          name: 'content',
          fields: [
            {
              type: 'ui',
              name: 'messageUI',
              admin: {
                components: {
                  Field: () => {
                    return Message({ message: 'No fields to show.' })
                  },
                },
                condition: (data, _) => {
                  return data?.hero?.type === 'none'
                },
              },
            },
// ...

Custom Message component

type Props = {
  message: string
}

export const Message = ({ message }: Props) => {
  return <em>{message}</em>
}

[frosty cobalt]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Implementing Live Preview in your app
• GraphQL Schema - Custom Field Schemas - Adding an NPM script
• Date Field - Admin Config - Display Format and Picker Appearance
• SEO Plugin - Basic Usage - Options - tabbedUI

Community-Help:

• Relationships not populating
• How to access relationship field full item data?

[outer summit]

wrap your component with hoc withCondition
example https://github.com/r1tsuu/payload-enchants/blob/master/packages/better-localized-fields/src/components/LocalizedField/index.tsx

could also just
Field: withCondition(() => <Message />)

[mystic fossil]

tysm for the help now I'm getting this

I tried both ways and also checked the source, the function is there

 ⨯ TypeError: (0 , _payloadcms_ui_forms_withCondition__WEBPACK_IMPORTED_MODULE_1__.withCondition) is not a function
    at eval (webpack-internal:///(rsc)/./src/payload/fields/hero.ts:54:125)
    at (rsc)/./src/payload/fields/hero.ts (C:\git\website\.next\server\app\(payload)\admin\[[...segments]]\page.js:1103:1)
    at __webpack_require__ (C:\git\website\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/payload/collections/Pages/index.ts:10:78)
    at (rsc)/./src/payload/collections/Pages/index.ts (C:\git\website\.next\server\app\(payload)\admin\[[...segments]]\page.js:1015:1)
    at __webpack_require__ (C:\git\website\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/payload.config.ts:21:85)
    at (rsc)/./src/payload.config.ts (C:\git\website\.next\server\app\(payload)\admin\[[...segments]]\page.js:894:1)
    at __webpack_require__ (C:\git\website\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/(payload)/layout.tsx:7:73) {
  type: 'TypeError',
  page: '/admin'
}
  50 |               admin: {
  51 |                 components: {
> 52 |                   Field: withCondition(() =>
     |                                        ^
  53 |                     Message({ message: 'No fields to show.' })
  54 |                   ),
  55 |                 },

[mystic fossil]

@outer summit any idea about this error?

[outer summit]

try to put this into a separate file with 'use client' on the top

[mystic fossil]

I still getting that error on server but it seems like it's working

Now I'm getting blank white page

[outer summit]

shouldn't be the error here if you did like this

`use client`
import { withCondition } from '@payloadcms/ui/forms/withCondition';

const _Message = () => {}

export const Message = withCondition(_Message)

[mystic fossil]

What if I create client component?

'use client'

import { withCondition } from '@payloadcms/ui/forms/withCondition'

type Props = {
  message: string
}

export const Message = withCondition(({ message }: Props) => {
  return <em>{message}</em>
})