What is wrong looping with Object.entries?

Question

{buyTicketData?.pricingOptions && (
  <select className={"select_1"}>
    {Object.entries(buyTicketData?.pricingOptions).forEach(
      ([key, value]) => {
        <option key={key}>{value.name}</option>;
      }
    )}
  </select>
)}

I found here how I can loop in React return, so, that not only the key is available as with Object.keys(), but value also. I can see during debugging, that call jumps in the option part, but in the rendered HTML no option appears, only an empty select. Why?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

`.forEach` doesn't return anything. Also [I have mentioned this before](https://stackoverflow.com/questions/69108183/typescript-why-object-fromentries-does-not-accept-array-of-tuple#comment122142637_69108183) — VLAZ, Sep 28 '21 at 17:07

score 0 · Answer 1 · answered Sep 28 '21 at 17:10

0

Array.prototype.forEach doesn't return a value.

Array.prototype.map does.

Try [1, 2, 3].forEach(x => x + 1) in a REPL. And then try [1, 2, 3].map(x => x + 1). You probably want the latter in this case.

answered Sep 28 '21 at 17:10

wegry

7,046
6
39
59

score 0 · Accepted Answer · answered Sep 28 '21 at 17:13

ForEach not returning a value. You must using with map

Maybe this can help you (remove the curly bracket)

{buyTicketData?.pricingOptions && (
 <select className={"select_1"}>
   {Object.entries(buyTicketData?.pricingOptions).map(
    ([key, value]) => (<option key={key}>{value.name}</option>)
 )}

)}

What is wrong looping with Object.entries?

2 Answers2