1

I am looking use PrimeReact Dropdown in NextJs app using typescript

When I select the list to get the dropdown options I get Error: Objects are not valid as a React child (found: object with keys {name, code})

The minimum code in a TSX file is

const catTypes = [
    { name: 'Brand', code: 'B' },
    { name: 'Category', code: 'C' },
    { name: 'Title', code: 'T' },
];

const [selectedCat, setSelectedCat] =   useState<any>(null);

<Dropdown value={selectedCity1} options=   {catTypes} />
Chris Hunter-Johnson
  • 414
  • 5
  • 19

1 Answers1

1

The options array needs to have the structure of label value pairs

    const catTypes = [
        { label: 'Brand', value: 'B' },
        { label: 'Category', value: 'C' },
        { label: 'Title', value: 'T' },
    ];

Or you can use optionValue="code" and optionLabel="name"

Melloware
  • 10,435
  • 2
  • 32
  • 62
Chris Hunter-Johnson
  • 414
  • 5
  • 19
  • Or you can use `optionValue="code"` and `optionLabel="name"` I edited your answer to have that as well. – Melloware Nov 07 '22 at 13:24