So in my server I have a list of places that I would like to chose in dropdown. So before anything I'm splitting the places because they're stored as a single string:
const where = settings?.places.split(',')
This is my first try to show it as dropdown options, the problem is that it displays one option with all the places:
<select>
<option value={where}> {where}</option>
</select>
The other option shows every option in a different box:
{where?.map((site, index) => {
return(
<select key={index}>
<option value={site}>{site}</option>
</select>
)
})}
Image of reference.
Any help is appreciated
CodePudding user response:
Assuming this is inside a function component, simply move the select
tag outside of the map function.
return (
...
<select>
{where?.map((site, index) => {
return(
<option key={index} value={site}>{site}</option>
)
})}
</select>
)