CODEWITHSUNDEEP
javascriptreactjssemantic-ui-react
Akhil Suseelan
Akhil Suseelan

Reputation: 217

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?

Upvotes: 0

Views: 372

Answers (1)

RedFox
RedFox

Reputation: 191

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.

Upvotes: 2

Related Questions