Why do my options created with array map method has empty values (React)?

Question

I used a for loop to create an array of month in numbers 1-12.
Then, I am trying to use a map array method to create 12 options for each number.
But the options have empty values.
Here's a sample code:

export default ({ experience }) => {
  let monthOptions = [];
  for (let i = 1; i < 13; i++) {
    monthOptions.push(i);
  }
  return (
    
    <select name="month" id="month">
      {
        monthOptions.map((month) => {
          return <option value={month} />;
        })
      }
    </select>
  )
};

Answer 1

The display value is taken from the label attribute or from the tag content, and it's not the same as the actual value that will be passed to the event handlers. To display a value in the options, include it when rendering the tag:

<option value={month}>{month}</option>;

Or use the label attribute:

<option value={month} label={month} />

Example:

const Example = () => {
  const monthOptions = [];
  
  for (let i = 1; i < 13; i++) {
    monthOptions.push(i);
  }
  
  return (
    <select name="month" id="month">
      {
        monthOptions.map((month) => (
          <option key={month} value={month}>{month}</option>
        ))
      }
    </select>  
  )
};
  
ReactDOM.render(
  <Example />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

You can shorten your code a bit, using Array.from().

Note: in this example, you can see that the value, and the display value are not identical.

const Example = () => (
  <select name="month" id="month">
    {
      Array.from({ length: 12 }, (_, month) => (
         <option value={month} key={month}>
            {month + 1}
          </option>
      ))
    }
  </select>  
);
  
ReactDOM.render(
  <Example />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>