Select is not getting populated with the element inside a Map object

Question

I have the following code:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import _ from "lodash";

interface AppProps { }
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React'
    };
  }

  render() {

    let options = new Map(_.range(2002, 1920).map(yr => [yr.toString(), yr]));
    console.log(options);

    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <select>
        {
          [...options.keys()].map((key: string) => {
            return (<option value={key} key={key}>{options.get(key)}</option>);
          })
        }
        </select>

      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

https://stackblitz.com/edit/react-ts-6jygtm?file=index.tsx

Do you have any idea of why the Select element is not getting populated with the elements inside that Map object?

I'm getting these errors:

This is the same issue as the one described [here](https://stackoverflow.com/questions/33464504/using-spread-syntax-and-new-set-with-typescript). TypeScript only supports iterables on Arrays, unless the `"downlevelIteration": true` option is set in tsconfig's compilerOptions. — cbr, Mar 18 '20 at 22:22
You can alternatively use `Array.from(options.keys())` instead of `[...options.keys()]`. — cbr, Mar 18 '20 at 22:23

Select is not getting populated with the element inside a Map object

0 Answers0