Estoy trabajando en reaccionar y, para una parte del proyecto, necesito una cantidad x de menús desplegables. Cada menú desplegable tendrá y cantidad de opciones para elegir. Por lo general, con cosas como esta, solo puedo usar una función de mapa simple y estoy listo para comenzar, sin embargo, la sintaxis se vuelve un poco complicada ya que un DropdownMenu tiene muchos Dropdown.Items . Mi código se ve así, no aparece ningún error y las declaraciones de console.log devuelven exactamente lo que se espera, pero no aparece absolutamente nada.

 const renderDefaultScheduling = () => { return allDevices.map( (device, superIndex) => { <Card> {renderAllOfThisDevice(device, superIndex)} </Card> }) } const renderAllOfThisDevice = (deviceObj, superIndex) => { let oneDeviceDropdowns = [] console.log(deviceObj) for (let i = 1; i <= deviceObj.amount; i = i + 1){ let thisOptions = renderDropDownOptionsFromList(deviceObj, superIndex) oneDeviceDropdowns.push( <DropdownButton title={deviceObj[i]}> {thisOptions} </DropdownButton> ) } return( <Card> <Card.Title>{deviceObj.name}</Card.Title> <Card.Body> {oneDeviceDropdowns} </Card.Body> </Card> ) } const renderDropDownOptionsFromList = (deviceObj, superIndex) => { console.log(deviceObj) return deviceObj.remaining_drivers.map( (driver, index) => { <Dropdown.Item key={index} onClick={() => handleDriverSelection(deviceObj, driver, index, superIndex)}> {driver.firstname} {driver.lastname} </Dropdown.Item> }) }

Lo que me molesta es que ni siquiera se representa la <Card.Title>{deviceObj.name}</Card.Title> , que no está dentro del mapa anidado, solo la primera capa... Entonces, si deviceObj está registrando correctamente , no veo legítimamente ninguna razón por la que esa línea no se represente. ¿Alguien tiene alguna idea? ¿Soy capaz de hacer esto con los menús desplegables?