react-select not setting defaultValue param properly

Question

So I have this piece of code, and somehow it's not setting the defaultValue properly, here's the value of patchsOptions[0]:

console.log(patchOptions[0]); // Object { value: "10.15.1", label: "10.15.1" }

<Select
    className="col-2"
    placeholder="Patch"
    defaultValue={patchsOptions[0]}
    options={patchsOptions}
    onChange={option => this.onChangePatch(option.value)}
/>

The default value keeps empty, but the options are loaded correctly, so I didn't see the problem since looking at some examples, it also uses the "options[0]" variable.

By changing the code this way, it works as expected:

<Select
    className="col-2"
    placeholder="Patch"
    defaultValue={{ value: 'test', label: 'test' }}
    options={patchsOptions}
    onChange={option => this.onChangePatch(option.value)}
/>

They both have the same obj structure, so I didn't get where's the problem. I logged the default value before rendering, and it's setting normally, it's not empty.

probably patchsOptions[0] is empty in the first time, post the code of patchsOptions — Ali Abu Hijleh
– Ali Abu Hijleh, Commented Aug 2, 2020 at 1:05
Did you log patchsOptions[0] before retuning the JSX? Is that not empty? — Ramesh Reddy
– Ramesh Reddy, Commented Aug 2, 2020 at 1:05
The options come from the state, I just map it to fit the label/value structure the lib uses before rendering. I logged the patchsOptions[0] before rendering and it's not empty — Lucas Constantino
– Lucas Constantino, Commented Aug 2, 2020 at 1:12

Ali Abu Hijleh · Accepted Answer · 2020-08-02 03:03:40Z

0

As the patchesOptions is set from an Async call, then the first render time it will be null, and the defaultValue doesn't change if you change it's value, this is like an initial value, so what you can do is to use value option, and link it to the selectedPatch, also I did some change (onChange) like this:

<Select
    className="col-2"
    placeholder="Patch"
    value={{this.state.selectedPatch.value, this.state.selectedPatch.label}}
    options={patchsOptions}
    onChange={option => this.onChangePatch(option)}
/>

edited Aug 2, 2020 at 3:03

answered Aug 2, 2020 at 1:45

Ali Abu Hijleh

5023 silver badges10 bronze badges

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

3 Comments

Lucas Constantino Over a year ago

You mean that the fact that is indeed first rendering as null, it will be set as null even though the app is rendered again with the change of any state? What small change do you mean? I tested using value instead of defaultValue and it works, but the front-end wont let me select another option, but the state itself changes normally since it's being updated by the onChange event

Ali Abu Hijleh Over a year ago

Yes, I've edited my answer. regarding selecting another option, did you change (onChange) as I've done? if yes then maybe the (option) is not the one required to be passed to OnChangePatch function, maybe something nested, debug it and check what's the option is, and then pass the correct object to onChangePatch

Lucas Constantino Over a year ago

It did work when passing the state directly instead of the variables, thanks man!

Collectives™ on Stack Overflow

react-select not setting defaultValue param properly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related