react-select：在多选下拉菜单中预先选择一个值

Question

I've inherited my first react app, and I need to make a change that looks VERY straight forward.

The change is on an email signup page, where user has a multi-select dropdown menu to indicate what they're interested in hearing about. My simple goal: make one of the items in the dropdown menu appear pre-selected. (And ultimately I'll pass along a value so it's only selected sometimes). In this example, the list values/labels come from DESSERT_TYPES, and I want to pre-select one of the values in that list: 'Sheet cake'.

Reading through react-select docs/examples, it looks like I just need to provide a value prop, but I've tried adding different variations of value= 'Sheet cake' , value={{label: "Sheet cake", value: "Sheet cake"}} , etc in the Field definition, in ReactSelectAdapter, or in the class constructor (with a colon instead of =), and nothing seems to work: the menu still just shows the placeholder text with nothing selected. I also tried using defaultOptions and loadOptions, but no luck there either.

All code given below is in the same EmailSignup.js file.

The rendered bit in question is:

<div className="email-modal-input-wrap">
  <label className="email-modal-label" htmlFor="interest-input">
    Please select your interest from the list below:
  </label>
  <Field
    name="interest"
    component={ ReactSelectAdapter }
    options={ DESSERT_TYPES }
    placeholder="I'm interested in a project about..."
    isMulti
    value= 'Sheet cakes'
    id="interest-input"
    />
  <label className="email-modal-hidden-label" htmlFor="interest-input">Interest</label>
</div>

That ReactSelectAdapter component is defined this way:

const ReactSelectAdapter = ({ input, ...rest }) => (
  <Creatable
    { ...input }
    { ...rest }
    styles={DROPDOWN_STYLES}
    classNamePrefix="react-select"
    searchable
  />
)

The constructor for the EmailSignup class has:

class EmailSignup extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      submitted: false,
      success: 'hidden',
      error: 'hidden',
      existing: 'hidden',
      modalIsOpen: true,
      location: undefined
    }

The includes are:

import React from 'react'
import Modal from 'react-modal'
import { Form, Field } from 'react-final-form'
import axios from 'axios'
import ProjectLogoList from './ProjectLogoList'
import PropTypes from 'prop-types'
import { PROJECT_DATA } from '../Utils/data/ProjectData'
import { DESSERT_TYPES } from '../Utils/data/dessertTypes'
import Creatable from 'react-select/lib/Creatable'
import ReactGA from 'react-ga';

What could I be missing here?

Answer 1

To set the initial value pass an object to the value prop:

<Creatable
    // ...other props
    options={DESSERT_TYPES}
    value={{label: "Cake", value: "cake"}}
/>