我如何才能让这个下拉列表显示所有的50个州，而不是"option #“

Question

现在，这段代码显示了一个列出"option #“的下拉列表。我如何才能使所有的50个州都可选，而不是选项和数字？

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

请注意，如果您的应用需要，请使用Form+FormField包装器。如果表单上下文不是必需的，请删除FormField包装器。

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"));