Hi there,
I want to create a macro for Confluence that inserts a select with custom options on a page. My goal ist to be able to have different types of selectable options like tags, users, icons and so on, essentially any UI Kit component that is applicable.
For starters I’d like to create a Select using the Tag component to be able to colour the options. As a reference, I have a plugin called Easy Dropdown Menu developed by my company, where we have that functionality, but it uses the connect-js platform. My current setup looks like this:
import React from "react";
import ForgeReconciler, { Select, Tag } from "@forge/react";
const App: React.FC = () => {
const options = [
{ value: "chocolate", label: <Tag text="Chocolate"/> },
{ value: "strawberry", label: <Tag text="Strawberry"/> },
{ value: "vanilla", label: <Tag text="Vanilla"/> },
];
return <Select options={options} />;
};
ForgeReconciler.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
This results however in the React error #31: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner}). If you meant to render a collection of children, use an array instead.
How can I resolve this?