Set defaultValue in react-select functional component

Question

I am building a reusable component using react-select for selecting US State.. I am trying to pass in a State value (like "OH") to set the default value but can't seem to wrap my head around this..

my data (small sample):

 const statesJson = [
  {
    "label": "Alabama",
    "value": "AL"
  },
  {
  "label": "Alaska",
  "value": "AK"
  },
  {
  "label": "American Samoa",
  "value": "AS"
  },
  {
  "label": "Arizona",
  "value": "AZ"
  },
  {
  "label": "Ohio",
  "value": "OH"
  }
]

My component:

import React, { Fragment, useState} from "react";
import statesJson from "./states";
import Select, { components } from "react-select";
import styled from "styled-components";
import PropTypes from "prop-types";

const StyledSelect = styled(Select)`
  font-size: 16px;
  font-weight: normal;
  color: #041e41;
  width: 250px;
`;

const propTypes = {
    id: PropTypes.string,
    onChange: PropTypes.func,
    className: PropTypes.string
};

const styles = {
    dropdownIndicator: (base: any) => ({
        ...base,
        color: "#65A100"
    }),
    menuList: (base: any) => ({
        ...base,
        height: "auto",
        border: "1px solid #0173c6",

        "::-webkit-scrollbar": {
            width: "9px"
        },
        "::-webkit-scrollbar-track": {
            background: "white"
        },
        "::-webkit-scrollbar-thumb": {
            background: "#0173C6"
        },
        "::-webkit-scrollbar-thumb:hover": {
            background: "#555"
        }
    })
}

const USStates: any[] = statesJson;

export function SelectState(props: any) {
    const [selected, setSelected] = useState();

    return (
        <StyledSelect
            {...props}
            styles={styles}
            value={selected}
            placeholder="Select a State"
            onChange={(item: any) => {
                setSelected(item);
                props.onChange(item.value);
            }}
            options={props.options.map((item: any) => ({ label: item.value + ' - ' + item.label, value: item.value }))}
        />
    );
};

export default function StateSelectDropDown(props: any) {
    return (
        <Fragment>
            <SelectState
                isSearchable
                defaultValue={props.state}
                options={USStates}
                onChange={(item: any) => {
                    alert(item);
                }}
            />
        </Fragment>
    );
}

and code snippet from page:

<div>
  <StateDropDown  state="OH" />
</div>

Any suggestions how to get this to work?

Codesandbox link

Can you recreate the problem in codesandbox?

Dennis Vash
– Dennis Vash

2021-09-19 15:29:43 +00:00
Commented Sep 19, 2021 at 15:29 — Dennis Vash
– Dennis Vash, Commented Sep 19, 2021 at 15:29
Here you go: codesandbox.io/s/flamboyant-bird-fj4nz

Dennis
– Dennis

2021-09-19 16:10:33 +00:00
Commented Sep 19, 2021 at 16:10 — Dennis
– Dennis, Commented Sep 19, 2021 at 16:10

edarv · Accepted Answer · 2021-09-19 16:59:37Z

4

You need to provide the full value object for the defaultValue to work. This should work:

export default function StateSelectDropDown(props: any) {
  return (
    <Fragment>
      <SelectState
        isSearchable
        defaultValue={USStates.find(({ value }) => value === props.state)}
        options={USStates}
        onChange={(item: any) => {
          console.log(item);
        }}
      />
    </Fragment>
  );
}

answered Sep 19, 2021 at 16:59

edarv

3711 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dennis Over a year ago

That worked, don't know how I missed it.. ugh

Naing Over a year ago

worked with value={...} instead of defaultValue={...} for me. Thanks!

Collectives™ on Stack Overflow

Set defaultValue in react-select functional component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related