Styjun

Problem in styling a monochrome plot

At what rate does the volume (velocity) of a note decay?

Unethical behavior : should I report it?

How do campaign rallies gain candidates votes?

"I you already know": is this proper English?

Why did so many MPs not vote in Meaningful Vote 3?

Expansion with *.txt in the shell doesn't work if no .txt file exists

Print sums of all subsets

Why didn't Britain or any other European power colonise Abyssinia/Ethiopia before 1936?

Piece-drop Mate #2

Does the Intel 8086 CPU have user mode and kernel mode?

Why is drive/partition number still used?

Trapped in an ocean Temple in Minecraft?

What is "I bet" in German?

Giant space birds hatching out of planets; short story

Why are all my history books dividing Chinese history after the Han dynasty?

How do I stop my characters falling in love?

Why isn't there a serious attempt at creating a third mass-appeal party in the US?

Integral of the integral using NIntegrate

Explain why watch 'jobs' does not work but watch 'ps' work?

How do I address my Catering staff subordinate seen eating from a chafing dish before the customers?

Why are so many countries still in the Commonwealth?

Is there a reason why I should not use the HaveIBeenPwned API to warn users about exposed passwords?

Spoken encryption

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

What is the difference between state and props in React?What's the difference between “super()” and “super(props)” in React when using es6 classes?How to pass props to this.props.childrenUncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: objectWarning: Failed prop type: Invalid prop 'source' supplied to 'Image'Warning: Failed prop type: Invalid prop `children` supplied to `RouterFailed prop type: Invalid prop `opacity` of type `object` supplied to `RCTView`Warning: Failed prop type: Invalid prop `as` supplied to `DropdownItem`React Warning: Failed prop type: Invalid prop of type `Object` suppliedUse HOC, React Context and componentDidMount API to get uid form Firebase

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

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
/>
)

reactjs typeahead react-bootstrap-typeahead

share|improve this question

asked Mar 26 at 17:40

jrichmond4jrichmond4

2055 bronze badges

add a comment | 

0

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
/>
)

reactjs typeahead react-bootstrap-typeahead

share|improve this question

asked Mar 26 at 17:40

jrichmond4jrichmond4

2055 bronze badges

add a comment | 

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
/>
)

reactjs typeahead react-bootstrap-typeahead

share|improve this question

asked Mar 26 at 17:40

jrichmond4jrichmond4

2055 bronze badges

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
/>
)

share|improve this question

asked Mar 26 at 17:40

jrichmond4jrichmond4

2055 bronze badges

share|improve this question

asked Mar 26 at 17:40

jrichmond4jrichmond4

2055 bronze badges

asked Mar 26 at 17:40

jrichmond4jrichmond4

2055 bronze badges

asked Mar 26 at 17:40

jrichmond4jrichmond4

2055 bronze badges

1 Answer
1

active

oldest

votes

0

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.

share|improve this answer

answered Mar 27 at 18:05

ericgioericgio

61911 gold badge77 silver badges2626 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55363261%2ffailed-prop-type-invalid-prop-defaultselected-supplied-to-typeaheadcontainer%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

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.

share|improve this answer

answered Mar 27 at 18:05

ericgioericgio

61911 gold badge77 silver badges2626 bronze badges

add a comment | 

0

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.

share|improve this answer

answered Mar 27 at 18:05

ericgioericgio

61911 gold badge77 silver badges2626 bronze badges

add a comment | 

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.

share|improve this answer

answered Mar 27 at 18:05

ericgioericgio

61911 gold badge77 silver badges2626 bronze badges

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

share|improve this answer

answered Mar 27 at 18:05

ericgioericgio

61911 gold badge77 silver badges2626 bronze badges

answered Mar 27 at 18:05

ericgioericgio

61911 gold badge77 silver badges2626 bronze badges

answered Mar 27 at 18:05

ericgioericgio

61911 gold badge77 silver badges2626 bronze badges