How to map an array from response API to select element in react?

Question

I am trying to get put the data from an array to in react. I first retrieve the array from api response and store in state. Below is my code which fail to get the value but key to <select>?

temp_list = [
            0:{fruit:"apple"},
            1:{fruit:"orange"}]

const f_list = this.state.fruit
const tmp_list = Object.keys(f_list).map((item, index) => <option value={item.fruit} >{item.fruit}</option>);

The result of <select> option will b:

0
1

Expected:

apple
orange

How can I achieve what I want? Thanks

You put react-select in the title. Can I assume that you are referring to a select element in a react environment, as opposed to the react-select library? — George
– George, Commented Mar 5, 2020 at 10:08
well your data structure is not correct temp_list it may be like [ {fruit:"apple"}, {fruit:"orange"}] — Manjeet Singh
– Manjeet Singh, Commented Mar 5, 2020 at 10:08
@George yes, i'm referring to select element. Already amended the title. Thanks for your remind — WILLIAM
– WILLIAM, Commented Mar 5, 2020 at 10:12
@ManjeetThakur the data I printed in console is as same as above. If the array is like yours, how to change my code? — WILLIAM
– WILLIAM, Commented Mar 5, 2020 at 10:15

ravibagul91 · Accepted Answer · 2020-03-05 10:12:49Z

1

If you are sure that f_list is an object. Then you should try this,

const tmp_list = Object.keys(f_list).map((item, index) => <option value={f_list[item].fruit} >{f_list[item].fruit}</option>);

Demo

answered Mar 5, 2020 at 10:12

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

How to map an array from response API to select element in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related