React-select - I can not work out how to set a default value

Question

This has been asked quite a few times, so sorry, but I can't work this out. I hae read the docs, but I couldn't find anything that worked, so I obvioulsy don't understand what's happening here.

class DivisionExtraDetails extends Component {
constructor(props) {
    super(props);

    this.state = {
        error: false,
        loading: true,
        removing: null,
        saving: false,
        geofence: false,
        startTimeOfDay: ''
    };
}

componentDidMount() {
    const { division } = this.props;

    Axios.get(`${API_URL}assetgroups/${division.id}`)
        .then(r => {
            this.setState({
                loading: false,
                geofence: r.data.geofence_assign,
                startTimeOfDay: r.data.day_start
            });
        })
        .catch(err => {
            if (!Axios.isCancel(err)) {
                this.setState({
                    error: true
                });
            }
    });
}


render() {
    const { error, loading, geofence, saving, startTimeOfDay } = this.state;
    const { assignText, division } = this.props;

    const geoFenceOptions = [
        {value: 1, label: 'YES'},
        {value: 0, label: 'NO'},
        {value: null, label: 'Not yet set'},
    ];

    return (
        <React.Fragment>
            <div className="col-5">
             <span>Assign a GeoFence (Yes/No)</span>
               <Select
                 selectedValue={geofence}
                 options={geoFenceOptions}
                 className="basic-multi-select"
                 classNamePrefix="select"
                 onChange={this.handleChange}
               />
            </div>                       
        </React.Fragment>
    );
}

}

I've also tried:

defaultValue={geofence}
selectedValue={geofence}
value={geofence}

And I've also tried the variable as:

{this.state.geofence}

I can see the call to the db is correctly populating the state if I view it in dev tools. But I can't work it out. If anyone can help with this seemingly simple task, that would be great. Thanks.

Answer 1

You are passing value as boolean or string in react select but you are passing objects as it's options so that's why react select was not able to find show default value.

To Solve this you need to pass correct object in value prop so try something like below:-

class DivisionExtraDetails extends Component {
constructor(props) {
    super(props);

    this.state = {
        error: false,
        loading: true,
        removing: null,
        saving: false,
        geofence: false,
        startTimeOfDay: '',
       
       // set geoFenceOptions as state so we can use it later
       geoFenceOptions: [
        {value: true, label: 'YES'},
        {value: false, label: 'NO'},
        {value: null, label: 'Not yet set'},
       ];
    };
}


// find correct geoFenseOption based on provided value
getGeoFenceValue = (value) => {
  return this.state.geoFenceOptions.find(option => option.value === value);
}

componentDidMount() {
    const { division } = this.props;

    Axios.get(`${API_URL}assetgroups/${division.id}`)
        .then(r => {
            this.setState({
                loading: false,
                geofence: this.getGeoFenceValue(r.data.geofence_assign),  // call function to find correct option
                startTimeOfDay: r.data.day_start
            });
        })
        .catch(err => {
            if (!Axios.isCancel(err)) {
                this.setState({
                    error: true
                });
            }
    });
}


render() {
    const { error, loading, geofence, saving, startTimeOfDay, geoFenceOptions } = this.state;
    const { assignText, division } = this.props;

    return (
        <React.Fragment>
            <div className="col-5">
             <span>Assign a GeoFence (Yes/No)</span>
               <Select
                 selectedValue={geofence}
                 options={geoFenceOptions}
                 className="basic-multi-select"
                 classNamePrefix="select"
                 onChange={this.handleChange}
               />
            </div>                       
        </React.Fragment>
    );
}

Answer 2

constructor(props) {
  super(props);

  this.state = {
    // ... code omitted
    geofence: /* set default value here */
  };
}