Error when using map for Html's select, option

April 23, 2023

Aren’t the following two codes the same code?

But when using map I got a this error caught TypeError: size.option.map is not a function

 <select id="size">
          <option value="">--pleae choose a size--</option>
          <option value="">{size.option.small}</option>
          <option value="">{size.option.medium}</option>
          <option value="">{size.option.large}</option>
          <option value="">{size.option.xlarge}</option>
          <option value="">{size.option.xxlarge}</option>
        </select>

        <select id="size">
          <option value="">--pleae choose a size--</option>
          {size.option.map((s) => (
            <option value={s}>{s}</option>
          ))}
        </select>

my json

>Solution :

size.option is an object, not an array therefore the map method is not callable. To iterate over an object you can use Object.keys/values/entries. For example:

<select id="size">
    <option value="">--pleae choose a size--</option>
    {Object.entries(size.option).map(([key, value]) => (
        <option key={key} value={key}>{value}</option>
    ))}
</select>

Don’t forget you must provide a key prop when rendering arrays.