Estoy tratando de hacer un menú desplegable en javascript donde obtener todos los estados de una función y mostrarlos en el menú desplegable. Pero el código que tengo hasta ahora muestra mal mi lista. Cada estado está uno al lado del otro en lugar de dentro del menú desplegable.
menú.js
export default function DropDownMenu(props){ if(!props.states) return return( <table> <body> {props.states.map(states=> <select> <option>{states.state}</option> </select>)} </body> </table> ) }Lo que está mostrando:
El problema es que está envolviendo el elemento select dentro del mapa, intente hacer lo siguiente:
export default function DropDownMenu(props){ if(!props.states) return return( <table> <body> // to select the value from option, just add the onChange listener <select onChange={(e) => { console.log(e.target.value) }}> {props.states.map(states=> <option>{states.state}</option> )} </select> </body> </table> ) }De esa manera, simplemente renderizará dinámicamente el elemento de opción.