CODEWITHSUNDEEP
javascriptreactjsformsdropdowngrommet
7k.luca
7k.luca

Reputation: 17

How can I make this dropdown show all of the fifty states instead of "option #"

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',
    };

Upvotes: 0

Views: 526

Answers (1)

Shimi
Shimi

Reputation: 1218

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

Upvotes: 0

Related Questions