Estoy creando la aplicación ReactJS en la que quiero representar los objetos secundarios del objeto principal en el menú desplegable usando materialUI select. Traté de implementarlo iterando sobre el objeto usando la función map() pero no obtengo valor cuando hago clic en el menú desplegable.

Aquí está mi código fuente para crear el menú desplegable.

 import React from "react"; import { Select, MenuItem, FormControl, InputLabel } from "@material-ui/core"; import "./CamSelect.css" export default class CamSelect extends React.Component { constructor(props) { super(props); this.state = { currentLocation: localStorage.getItem("location"), data: [ { location: "abc", link: [ {name: "cam1", url: "https://...."}, {name: "cam2", url: "https://...."} ] }, { location: "xyz", link: [ {name: "cam1", url: "https://...."}, ] }, ], selected: '', }; } handleChange = (event) => { this.setState({ selected: event.target.value, name: event.target.name }); }; renderOptions() { return this.state.data.map((dt, i) => { if(this.state.currentLocation == dt.location){ dt.link.map(lnk => { console.log(lnk.name) return ( <MenuItem label="Select a camera" value={lnk.url} key={i} name={lnk.name} > {lnk.name} </MenuItem> ) }) } } ) }; render() { return ( <FormControl className="camera-select" style={{ minWidth: "100px"}}> <InputLabel id="demo-simple-select-label" style={{color:"white"}}>Cam</InputLabel> <Select labelId="demo-simple-select-label" id="demo-simple-select" className="camera-text-color" value={this.state.selected} onChange={this.handleChange} > {this.renderOptions()} </Select> </FormControl> ); } }

Mi expectativa es que cuando la ubicación actual sea igual a la clave de ubicación, es decir, "abc" , que está en el objeto de matriz, entonces quiero mostrar el valor de cam1, cam2 en el menú desplegable.