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.

I've changed the code to reflect the different value name const geoFenceOptions = [ {value: true, label: 'Yes'}, {value: false, label: 'N0'}, {value: null, label: 'Not yet set'}, ]; — Paul Pickins
– Paul Pickins, Commented May 25, 2021 at 5:03
So you are passing options as objects but you are passing value in react select as boolean or string so that's why it is not working. Try to pass value as object like {value: false, label: 'N0'} — Priyank Kachhela
– Priyank Kachhela, Commented May 25, 2021 at 5:09
Thank you very much. How might that value look if I am trying to dynamically populate that based on the API call? ---- {{value: {geofence}, label: {???}}}. <-- something like this? — Paul Pickins
– Paul Pickins, Commented May 25, 2021 at 5:30

Priyank Kachhela · Accepted Answer · 2021-05-25 06:01:30Z

2

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

answered May 25, 2021 at 6:01

Priyank Kachhela

2,64511 silver badges17 bronze badges

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

3 Comments

Paul Pickins Over a year ago

Thank you or your help. I appreciate it, but, I still cannot set the default value, it's still not showing the value from "geofence".

Priyank Kachhela Over a year ago

Are you passing value prop in react-select?

Paul Pickins Over a year ago

I am currently using "selectedValue={this.state.startTimeOfDay.value}" in the select box. If I call "this.state.starTimeOfDay.value" from the console, it returns: "00:00:00" which is exactly what I need, but I cannot get it to load on first render of the component. I wonder if there is a different property on the Select component I should use to set it from first render after the DB call from "componentDidMount" ??

Matthew Kwong · Accepted Answer · 2021-05-25 04:52:17Z

0

constructor(props) {
  super(props);

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

answered May 25, 2021 at 4:52

Matthew Kwong

3,0062 gold badges17 silver badges25 bronze badges

2 Comments

Paul Pickins Over a year ago

It's already been set there, as shown in the code above. Either way, I do an API call in 'componentDidMount()' that sets it to the correct value from the DB.

Matthew Kwong Over a year ago

Your geoFenceOptions is an array of objects, while you give a default value of boolean. Obviously, that will never work. Not to mention the available values in geoFenceOptions are 1, 0, and null. There is no false here.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related