CODEWITHSUNDEEP
reactjstypeaheadreact-bootstrap-typeahead
jrichmond4
jrichmond4

Reputation: 111

Failed prop type: Invalid prop `defaultSelected` supplied to `TypeaheadContainer(WrappedTypeahead)`

I'm passing the selected item as a prop to my component that utilizes react-bootstrap-typeahead as well as loading the options in the componentDidUpdate method of this component. I'm trying to conditionally add the 'defaultSelected' property as it seemed to fail when the options weren't loaded yet but I still get this error:

Failed prop type: Invalid prop defaultSelected supplied to TypeaheadContainer(WrappedTypeahead)

The selectedCourier is set from the props which is an object that matches up with one of the options returned from the GET couriers response. Any help?

constructor(props) {
    super(props);

    this.state = {
        step: props.step,
        selectedCourier: props.step.courier && props.step.courier.courierId ? props.step.courier : null,
        submitMessage: props.step.courier && props.step.courier.submitMessage ? props.step.courier.submitMessage : '',
        couriers: []
    };
}

componentDidMount = () => {
    nprogress.start();
    nprogress.configure({showSpinner: false, easing: 'ease', speed: 500});
    axios
        .get('/Couriers')
        .then(response => {
            console.log(this.state);
            this.setState({couriers: response.data});
            nprogress.done()
        })
        .catch(function (error) {
            nprogress.done()
        });
    console.log(this.state);
};

render() {
    var inputProps = {};

    if (this.state.selectedCourier != null && this.state.couriers.length > 0) {
        inputProps.defaultSelected = this.state.selectedCourier
    }
    return (
...
<Typeahead
 onInputChange={this.handleCourierSearchChange}
 labelKey="name"
 options={this.state.couriers}
 placeholder="Search couriers..."
 onChange={selected => {
     this.selectCourier(selected);
 }}
 id="courierSearch"
 ref={(ref) => this._typeaheadCouriers = ref}
 {...inputProps}
/>
)

Upvotes: 0

Views: 1107

Answers (1)

ericgio
ericgio

Reputation: 3509

Both defaultSelected and selected expect an array, but it looks like props.step.courier is an object. Try the following when defining your state:

this.state = {
  ...
  selectedCourier: props.step.courier && props.step.courier.courierId ? [props.step.courier] : [],
};

You also most likely want to use selected instead of defaultSelected, since it looks like this is a controlled component. defaultSelected won't be set or changed after the initial mount, but you're trying to update the selections when the set of options is populated.

Upvotes: 1

Related Questions