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?
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.