如何为100个菜单项创建一个下拉菜单？

Question

I have the following piece of code in React JS front-end that I created using Material-UI . It creates a drop-down menu field.

Menu items are hard-coded. This works fine if the number of items is small. What if I have 100 items? Of course, I could list all 100 items as I did below in my example. However, this approach is sort of an ugly workaround. Is there any correct way to do it? For example, can I read menu items from CSV file or a separate class of constants?

<Grid item xs={true}>
     <FormControl
         className={this.props.styles.formControl}
         margin="normal">
         <InputLabel shrink htmlFor="origin-label-placeholder">
            Origin
         </InputLabel>
         <Select
             onChange={(event) => this.props.handleChange("origin", event)}
             value={this.props.state.origin}
             input={<Input name="origin" id="origin-label-placeholder" />}
             displayEmpty
             name="origin">
                        <MenuItem value={"A"}>A-option</MenuItem>
                        <MenuItem value={"B"}>B-option<</MenuItem>
                        <MenuItem value={"C"}>C-option<</MenuItem>
                        <MenuItem value={"D"}>D-option<</MenuItem>
                        <MenuItem value={"E"}>E-option<</MenuItem>
                        <MenuItem value={"F"}>F-option<</MenuItem>
                        <MenuItem value={"G"}>G-option<</MenuItem>
                        <MenuItem value={"A2"}>A2-option<</MenuItem>
                        <MenuItem value={"B2"}>B2-option<</MenuItem>
                        <MenuItem value={"C2"}>C2-option<</MenuItem>
                        <MenuItem value={"D2"}>D2-option<</MenuItem>
         </Select>
    </FormControl>
</Grid>

Answer 1

You can create an array of options and iterate over the same,

const options = [{label:"A-option",value:"A"},{label:"B-option",value:"B"},{label:"C-option",value:"C"},{label:"D-option",value:"D"}]

You have following places to write this,

1. You can maintain this in separate file, export the array and import where you want to use.

2. You can maintain this directly in component where you want to use it.

3. You can maintain in state.

You can iterate like this,

{options && options.length && options.map(option => {
      return <MenuItem value={option.value}>{option.label}</MenuItem>
   })
}

Note: If you choose to maintain in state, you need to use this.state.options .

---

Update

Maintain the array in separate file and export the same. For example, Constants.js file

export const options = [{label:"A-option",value:"A"},{label:"B-option",value:"B"},{label:"C-option",value:"C"},{label:"D-option",value:"D"}]

Then you need to import this in your component like,

import {options} from './Constant';  //Notice the curly braces due to named export

Now you can iterate like I shown above.