solved drowdown options error when passed in

UI Components for React
Post Reply
chrishj
Posts: 206
Joined: 11 Jul 2011, 21:58

03 Nov 2022, 15:40

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
PrimeReact: 8.5.0
NextJs: 13.0.0
Theme Apollo v7.0
Database pg 8.8.0
react-hook-foem: 7.38.0

chrishj
Posts: 206
Joined: 11 Jul 2011, 21:58

04 Nov 2022, 11:00

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' },
	];
PrimeReact: 8.5.0
NextJs: 13.0.0
Theme Apollo v7.0
Database pg 8.8.0
react-hook-foem: 7.38.0

Melloware
Posts: 3385
Joined: 22 Apr 2013, 15:48

04 Nov 2022, 14:40

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.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.1
PrimeReact 8.6.1

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest