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 (
        <Select label="Example" name="example">
          { => <Option {...option} />)}
        <Button onClick={setNewOptions} text="Change options" />

export const run = render(
    <App />

Hope this helps :slight_smile:


Yes, the example led me to proper coding of the select options given an existing array of objects with labels and values.


1 Like