我怎样才能让这个下拉列表显示所有五十个州而不是“选项#”

Question

Right now this code shows a dropdown form that lists "option #". How can I make all of the fifty states selectable instead of the option and a number?

import React, { useState } from 'react';
    
    import { 
        Box, 
        FormField, 
        Grommet, 
        Select, 
        MaskedInput,
        TextInput 
    } from 'grommet';
    import { grommet } from 'grommet/themes';
    
    const allOptions = Array(50)
      .fill()
      .map((_, i) => `option ${i + 1}`);
    
    export const Simple = () => {
      const [value, setValue] = useState('');
    
      return (
        <Grommet theme={grommet}>
          <Box align="center"  background="light-2" >
            <FormField label="State" htmlFor="select" >
              <Select
                id="select"
                placeholder="placeholder"
                options={allOptions}
                value={value}
                onChange={({ option }) => setValue(option)}
              />
            </FormField>
    </Box>
                </Grommet>
      );
    };
    export default {
      title: 'Input/FormField/Simple',
    };

Answer 1

Please be mindful to use Form+FormField wrappers if required by your app. If the Form context isn't required please remove the FormField wrapper.

import React, { useState } from "react";
import { render } from "react-dom";

import { Box, FormField, Grommet, Select } from "grommet";
import { grommet } from "grommet/themes";

// https://gist.github.com/tleen/6299431
const allOptions = [
  "Alabama",
  "Alaska",
  "American Samoa",
  "Arizona",
  "Arkansas",
  "California",
  "Colorado",
  "Connecticut",
  "Delaware",
  "District of Columbia",
  "Federated States of Micronesia",
  "Florida",
  "Georgia",
  "Guam",
  "Hawaii",
  "Idaho",
  "Illinois",
  "Indiana",
  "Iowa",
  "Kansas",
  "Kentucky",
  "Louisiana",
  "Maine",
  "Marshall Islands",
  "Maryland",
  "Massachusetts",
  "Michigan",
  "Minnesota",
  "Mississippi",
  "Missouri",
  "Montana",
  "Nebraska",
  "Nevada",
  "New Hampshire",
  "New Jersey",
  "New Mexico",
  "New York",
  "North Carolina",
  "North Dakota",
  "Northern Mariana Islands",
  "Ohio",
  "Oklahoma",
  "Oregon",
  "Palau",
  "Pennsylvania",
  "Puerto Rico",
  "Rhode Island",
  "South Carolina",
  "South Dakota",
  "Tennessee",
  "Texas",
  "Utah",
  "Vermont",
  "Virgin Island",
  "Virginia",
  "Washington",
  "West Virginia",
  "Wisconsin",
  "Wyoming"
];

export const App = () => {
  const [value, setValue] = useState("");

  return (
    <Grommet theme={grommet}>
      <Box align="center" background="light-2">
        <FormField label="State" htmlFor="select">
          <Select
            id="select"
            placeholder="placeholder"
            options={allOptions}
            value={value}
            onChange={({ option }) => setValue(option)}
          />
        </FormField>
      </Box>
    </Grommet>
  );
};

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