display array values into select option tag in react js

Question

I am trying to display array values into select tag, but all the array values displayed as single value. Please see below logic I added. Data is dynamic, I am getting data from backend like this ["Sankranti", "Sankranti 1"].

const [eventNameList, setEventNameList] = useState([])

var eventList = eventNameList.length > 0 ? 
                eventNameList.map((item,i) => {
                    console.log('list: ', item)
                    return (
                        <option>{item}</option>
                        )
                    })
                    :
                    'No Events'
<select>
      {eventList}
</select>

please find below console screen shot

could you print eventNameList outside the loop and show be the result? — Joseph
– Joseph, Commented Jan 15, 2021 at 3:03
I think your result is nested array, that's why you are getting an array in a loop. Could you show us your result returned from api. — Kaung Khant Zaw
– Kaung Khant Zaw, Commented Jan 15, 2021 at 3:06
outside loop i added eventNameList. it displayed in console like this. eventNameList: [Array(2)] 0: (2) ["Sankranti", "Sankranti 1"] length: 1 proto: Array(0) — boba poorna
– boba poorna, Commented Jan 15, 2021 at 3:30

Joseph · Accepted Answer · 2021-01-15 07:10:10Z

1

It looks that your list is nested inside another array so to fix this you could use flatMap instead of map

or you could just iterate throw the first element inside your nested array

const [eventNameList, setEventNameList] = useState([])

var eventList = eventNameList.length > 0 ? 
                eventNameList[0].map((item,i) => {
                    console.log('list: ', item)
                    return (
                        <option>{item}</option>
                        )
                    })
                    :
                    'No Events'
<select>
      {eventList}
</select>

edited Jan 15, 2021 at 7:10

answered Jan 15, 2021 at 3:08

Joseph

6,3273 gold badges24 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

boba poorna Over a year ago

I got same results previous results.

Joseph Over a year ago

try this one instead of flatMap try eventNameList[0].map

boba poorna Over a year ago

Thanks this logic eventNameList[0].map worked. could you please let me how this logic works.

Joseph Over a year ago

you are welcome :), because it returns a subarray that includes [["Sankranti", "Sankranti 1"], "another data you do not need"] so as you mention you want the list in the first index only that contains your array so you can access it by its index in the outer array

Collectives™ on Stack Overflow

display array values into select option tag in react js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related