Is there a better approach for this?
I am trying to populate Select from API data.
The API will return an array ['Silver','Blue','White'].
I used the map function to return Menu Item tag.
The code works good but is it the right approach ?
Thanks
import React from 'react'
import axios from 'axios'
import { useState , useEffect } from 'react'
import Select, { SelectChangeEvent } from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
const formname = 'fhd011'
export default function Fhd011() {
const [color , setColor] = useState([]);
useEffect(()=>{
const getColor = async () => {
const {data: res} = await axios.get(`http://localhost:8000/getColor/${formname}`)
setColor(res)
}
getColor()
},[])
const [color_li, setColor_li] = React.useState('');
color
const handleChange = (event: SelectChangeEvent) => {
setColor_li(event.target.value);
}
const Se = color.map(item =>{
return(
<MenuItem key={item} value={item}>{item}</MenuItem>
)
})
return (
<FormControl sx={{ m: 1, minWidth: 120 }}>
<Select
labelId="demo-simple-select-autowidth-label"
id="demo-simple-select-autowidth"
value = {color_li}
onChange={handleChange}
label="color"
>
{Se}
</Select>
<FormHelperText>Pick a Color</FormHelperText>
</FormControl>
)
}