Not working anymore in v3.

[danielkoller]

Hi,

thanks for the example and the video.

Unfortunately with v3 released, this example is outdated.

[Function: CustomSelectComponent]
 ⨯ node_modules/.pnpm/payload@3.2.2_graphql@16.9.0_monaco-editor@0.52.0_react-dom@19.0.0-rc-66855b96-20241106_react_2wvkd4npc2dg5f3kjasvewy6ly/node_modules/payload/dist/bin/generateImportMap/index.js (81:1) @ addToImportMap
 ⨯ Error: addToImportMap > Payload component must be an object or a string
    at async IndexPage (./src/app/[locale]/(frontend)/page.tsx:57:21)
digest: "2847518325"
  79 |         if (typeof payloadComponent !== 'object' && typeof payloadComponent !== 'string') {
  80 |             console.error(payloadComponent);
> 81 |             throw new Error('addToImportMap > Payload component must be an object or a string');
     | ^
  82 |         }
  83 |         if (Array.isArray(payloadComponent)) {
  84 |             for (const component of payloadComponent){

I also get this TypeScript-Error for the Component.

types.d.ts(127, 9): The expected type comes from property 'Field' which is declared here on type '{ Cell?: CustomComponent; Description?: CustomComponent<FieldDescriptionClientComponent | FieldDescriptionServerComponent>; Field?: CustomComponent<...>; Filter?: PayloadComponent; } | ... 20 more ... | ({ ...; } & { ...; })'

Thanks!

[cleathley]

This worked for me (for the single option)

fields/CountrySelect/config.ts

import { Field } from 'payload'

export const CountrySelectField: Field = {
  name: 'country',
  type: 'text',
  admin: {
    components: {
      Field: '@/fields/CountrySelect/CountrySelect#CountrySelect',
    },
  },
}

export default CountrySelectField

fields/CountrySelect/CountrySelect.tsx

'use client'

import { FieldError, FieldLabel, SelectInput, useField } from '@payloadcms/ui'
import { Option } from '@payloadcms/ui/elements/ReactSelect'
import { TextFieldClientComponent } from 'payload'
import React from 'react'

export const CountrySelect: TextFieldClientComponent = ({ path, field, validate }) => {
  const { value, setValue, errorMessage, showError } = useField<string>({ path, validate })
  const [options, setOptions] = React.useState([])
  const classes = ['field-type', showError && 'error'].filter(Boolean).join(' ')

  // Fetch options on component mount
  React.useEffect(() => {
    const fetchOptions = async () => {
      try {
        const response = await fetch('https://restcountries.com/v3.1/all')
        const data = await response.json()

        const countryOptions = data.map((country) => {
          return {
            label: `${country.name.common + ' (' + country.flag + ')'}`,
            value: country.name.common,
          }
        })

        setOptions(countryOptions.sort((a, b) => a.label.localeCompare(b.label)))
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchOptions()
  }, [])

  const handleChange = (e: Option) => {
    if (e !== null) setValue(e.value)
    else setValue('')
  }

  return (
    <div className={classes}>
      <FieldLabel htmlFor={path} label={field.label} required={field.required} />
      <FieldError message={errorMessage} />
      <SelectInput
        path={path}
        name={path}
        options={options}
        showError={showError}
        value={value}
        onChange={handleChange}
      />
    </div>
  )
}

[antareephasan]

This worked for me, I am using payloadcms v4

"use client";

import * as React from "react";
import { SelectField, useField } from "@payloadcms/ui";
import { Option } from "payload";

type Country = {
  name: { common: string };
  flag: string;
  idd: { root: string; suffixes: string[] };
};

const PhoneSelectComponent = ({ path }: { path: string }) => {
  const { setValue, value } = useField<string>({ path });
  const [options, setOptions] = React.useState<
    { label: string; value: string }[]
  >([]);

  // Fetch options on component mount
  React.useEffect(() => {
    const fetchOptions = async () => {
      try {
        const response = await fetch("https://restcountries.com/v3.1/all");
        const data: Country[] = await response.json();

        const countryOptions = data
          .filter(
            (country) => country.idd?.root && country.idd.suffixes?.length
          )
          .map((country) => {
            const phoneCode = `${country.idd.root}${country.idd.suffixes[0]}`;
            return {
              label: `${country.name.common} ${country.flag} (${phoneCode})`,
              value: phoneCode,
            };
          });
        setOptions(
          countryOptions.sort((a: { label: string }, b: { label: any }) =>
            a.label.localeCompare(b.label)
          )
        );
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchOptions();
  }, []);

  const onChange = (option: Option | Option[]) => {
    setValue(option);
  };

  return (
    <div>
      <label className="field-label">Country Code</label>
      <SelectField
        path={path}
        field={{
          name: path,
          hasMany: false,
          options,
        }}
        value={value}
        onChange={onChange}
      />
    </div>
  );
};
export default PhoneSelectComponent;