¿Hay un mejor enfoque para esto?
Estoy tratando de completar Seleccionar de los datos de la API.
La API devolverá una matriz ['Plata', 'Azul', 'Blanco'].
Usé la función de mapa para devolver la etiqueta del elemento del menú.
El código funciona bien, pero ¿es el enfoque correcto?
Gracias
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> ) }