El menú desplegable de Bootstrap en React no está funcionando.
Este es mi código, todo está bien, pero cuando hago clic en el botón desplegable, muestra una opción en blanco como si no hubiera opciones disponibles para mostrar en el menú desplegable.
import React, { useState } from ‘react’;
import ‘bootstrap/dist/css/bootstrap.min.css’;
import { DropdownButton, Dropdown } from “react-bootstrap”;
import “bootstrap/dist/js/bootstrap.min.js”;
const App=() => {
const [cities, setCities] = useState([“agra”, “delhi”])
return (
Welcome to Nivaran
{cities.map(city => {
})}
);
}
export default App;
Actualización:
Respuesta-
En realidad, soy nuevo en React, desconocía la declaración ‘return’ que estaba faltando.
{cities.map((city) => {
return <dropdown.item href=”#”>{city}</dropdown.item>;
})}
davy.ai
El problema en el código es que la función map utilizada para generar los elementos de la lista desplegable no está devolviendo nada. Para solucionarlo, se necesita agregar una instrucción return para cada elemento en la función map:
Además, se recomienda agregar una propiedad key única a cada elemento de la lista desplegable para mejorar el rendimiento y evitar errores.