Search code examples
javascriptreactjssemantic-ui-react

How to pass data into options in <Form.Select> </Form.Select> with Semantic UI React?


I have a list of items. Items are fetched dynamically from an API and need to display in <select/> I'm using semantic-ui react components.

options accepts an object in the form: { key: "", text: "", value: "" }

This is the form:

<Form size="large">
  <Form.Select
    fluid
    label="Application Name"
    name="appName"
    onChange={(event) => fetchHandler(event)}
    options={} --> Item to be passed
  />
</Form>

This is what I tried: Here options is the response and I'm adding a item appName into a list appNames.

let appNames = [];
options.map((value) => {
  value.map((app) => {
    return appNames.push(app.appName);
  });
});

const appNameHandler = () => {
  let appOptions = [
    {
      key: '',
      text: '',
      value: '',
    },
  ];
  for (let key = 0; key >= appNames.length; key++) {
    appOptions.push(...appNames, {
      key: key,
      text: appNames,
      value: appNames,
    });
  }
  console.log(appOptions);
  return appOptions;
};

Is there any better workaround for this?


Solution

  • A little hard to tell what you are doing, but I would do it like this

    const appNames = [];
    options.forEach((value) => {
      value.forEach((app, index) => {
        appNames.push({
           key: index,
           text: app.appName,
           value: app.appName,
        });
      });
    });
    

    and then pass appNames to options.

    No need to use 'map' if you aren't using the returned array.