How to dynamically add options to select in UI Kit?

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 :slight_smile:

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