How to a drop down-down menu list

user_18324924 0
Viewed 73

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:

enter image description here

reactjs drop-down-menu javascript
1 Answers

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.

user_128987480
Related