react select not recognizing default value

Question

I have a react select component that isn't recognizing the default value option. The code looks like this:

renderPlans(){
        if(this.props.plans){
            let list =  this.props.plans.map(item=>{
                return ({label:item.description, value:item.id})
            });

            return(
                <Select
                    name= "tile-plans"
                    value= {this.state.selected}
                    classNamePrefix='react-select-container'
                    options={list}
                    defaultValue={list[0]}
                    onChange={(e) => { e ? this.setState({selected: e.value}) : this.setState({selected: ''}) }}
                />
            )
        }
    }

from everything I can find on its docs this is the format to give it. Basically I just want the first option to always be the default choice as there will be times when there is only 1 option and it doesn't make sense for someone to need to select a drop down. I also have a graph that's being loaded underneath so if an option is selected the graph won't load.

This isn't a duplicate question as I know you can do it like this: value= {this.state.selected ? this.state.selected:list[0].label} but it's not working. The input remains blank on load.

Possible duplicate of [How to set a default value in react-select](https://stackoverflow.com/questions/43495696/how-to-set-a-default-value-in-react-select) — imjared, Aug 08 '18 at 20:00
this isn't a duplicate of that question. I'm not trying to figure how to put a static string in the values section or placeholder data. I need an initial selection of the first choice. — , Aug 08 '18 at 20:03

Tholle · Accepted Answer · 2018-08-08T20:35:02.987

1

The documentation states that "If you don't provide these props, you can set the initial value of the state they control", referencing among others the value prop you provide.

You can set the selected to the first element in list when the component is created instead.

Example

class App extends React.Component {
  state = {
    selected: this.props.list[0]
  };

  handleChange = selected => {
    this.setState({ selected });
  };

  render() {
    const { selected } = this.state;

    return (
      <Select
        value={selected}
        onChange={this.handleChange}
        options={this.props.list}
      />
    );
  }
}

ReactDOM.render(
  <App
    list={[
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry" },
      { value: "vanilla", label: "Vanilla" }
    ]}
  />,
  document.getElementById("root")
);

edited Aug 08 '18 at 20:35

answered Aug 08 '18 at 20:06

Tholle

108,070
19
198
189

1

Think you need `this.setState({selected: selectedOption });` . demo doesn't allow change displayed otherwise – charlietfl Aug 08 '18 at 20:13
@charlietfl Ops, thanks. I tried to be clever and match the variable names, but forgot one of them. – Tholle Aug 08 '18 at 20:17
I whole heartedly understand why this should work and with the mod about it does work in sandbox. BUT not in actual code. I even tried the minimum of value={"hi"} to see if it would just spit that out and I still get a "Select..." placeholder text in the select on load. – Aug 08 '18 at 20:18
@KyleT Could you create a [CodeSandbox](https://codesandbox.io/s/new) isolating the wrong behavior you are experiencing? It will be easier to help you that way. – Tholle Aug 08 '18 at 20:20
1

played around with your code in sandbox and was able to figure it out. Thanks Tholle, you've been a lifesaver today. – Aug 08 '18 at 20:34

react select not recognizing default value

1 Answers1

Linked