'How to a drop down-down menu list
I am trying to do a dropdown menu in javascript where get all states from a function and show in the drop down menu. But the code that I have so far is showing my list wrong. Every state is next to each other instead of inside the drop down menu.
menu.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>
)
}
What is showing:
Solution 1:[1]
The problem is that you are wrapping the select element within the map, try to do the following:
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>
)
}
That way you will just render dynamically the option element.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |