What is wrong looping with Object.entries? [duplicate]-CodePudding

{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

CodePudding user response：

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.

CodePudding user response：

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>)
 )}

)}