Trying to add options programmatically to some select component but cannot find my way in. Maybe someone can throw a simple example.
Hey @RichardVencu,
I have created an example in a confluence content byline item. On button press, the options will change.
import ForgeUI, { render, useState, ContentBylineItem, Select, Option, Button, InlineDialog, Fragment, Form } from "@forge/ui";
const App = () => {
const [options, setOptions] = useState([
{ label: 'first', value: 'first' },
{ label: 'second', value: 'second' },
{ label: 'third', value: 'third' },
])
const setNewOptions = () => setOptions([
{ label: 'fourth', value: 'fourth' },
{ label: 'fifth', value: 'fifth' },
{ label: 'sixth', value: 'sixth' },
])
return (
<InlineDialog>
<Form>
<Select label="Example" name="example">
{options.map(option => <Option {...option} />)}
</Select>
<Button onClick={setNewOptions} text="Change options" />
</Form>
</InlineDialog>
);
};
export const run = render(
<ContentBylineItem>
<App />
</ContentBylineItem>
);
Hope this helps
2 Likes
Yes, the example led me to proper coding of the select options given an existing array of objects with labels and values.
Thanks
1 Like