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.
Advertisement
Answer
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> ); }