solved drowdown options error when passed in

[chrishj]

I am looking to use dropdown within a react-hooks-form but the option message complains about "Objects are not valid as a React child (found: object with keys {name, code})"
My page is within Nextjs but as this is client-only - I do not see this as an issue.
My page is a tsx page.

The minimum code to recreate the issue is taken from the documentation where the options are passed in from an array

Code: Select all

const catTypes = [
		{ name: 'Brand', code: 'B' },
		{ name: 'Category', code: 'C' },
		{ name: 'Title', code: 'T' },
	];
	
const [selectedCity1, setSelectedCity1] = useState<any>(null);



<Dropdown value={selectedCity1} options={catTypes} />
	
	

If the options array is directly entered then Dropdown works as expected. So the issue is with it being passed in as an array.

Code: Select all

<Dropdown value={selectedCity1} options={catTypes} />

Thanks for assistance

[chrishj]

The structure of the options array needs to be as below

Code: Select all

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

[Melloware]

thanks for posting back you got it working. You can also use `optionLabel` and `optionValue` attributes if your JSON is not that default format to tell it which JSON fields you want.