defaultValue doesn't change... dropdown react

Question

I have a dropdown that get it's option from a fetch, and when I select and option another fetch is requested to save that into the DB, and then it return that into the state so the selected value is now in the state. BUT! my dropdown doesn't update the selected value, even though it updates correctly in the DB.

the dropdown:

<Form.Field className="dropdown">
   <label>{answer.answerText}</label>
   <Dropdown  
    key={ answer.name } 
    value={answer.value <!--THIS IS UPDATED AFTER SELECTION, BUT DOESN'T SHOW -->} 
    style={{paddingLeft: pad}} 
    onChange={(e) => this.blurHandler(e.target.textContent,answer)}  
    name={ answer.name } 
    disabled={answer.settings.disabled} 
    options={answer.dropdownOptions}
   />
</Form.Field>

The method that gets called.

blurHandler(e,answer) {
    var answerValue = e;
    var projectId = this.props.projectId;
    this.props.updateAnswer('/api/update-answer', 
      answer.questionId,
      projectId,
      answer._id, 
      answerValue, 
      answer.settings.answerType
      );
}

what updateAnswer does is just a fetch to save the value to the projects answer in the DB.

Yeah I'm using redux and the answer object is a state that has been passed down from a parent — LittleMygler
– LittleMygler, Commented Jul 20, 2018 at 9:44
i think the problem is, redux store may not be updating after the api being called so the state does not change.can you put your code in jsfiddle or codesandbox — Harikrishnan
– Harikrishnan, Commented Jul 20, 2018 at 9:45

brianespinosa · Accepted Answer · 2018-07-23 15:50:19Z

1

Your question title says defaultValue but you do not use that prop anywhere in your Dropdown component. When you are defining a value in your Dropdown component, or on any SUIR component, that means you must control all other input interactions yourself and you lose any of the out of the box state controls that come with SUIR components. There are definitely cases where you might want this.

I'd recommend changing your value prop to a defaultValue prop on your Dropdown and that should give you what you're expecting. The Dropdown will only initialize itself with that value but it will change in the UI the way you are expecting.

answered Jul 23, 2018 at 15:50

brianespinosa

2,39114 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

defaultValue doesn't change... dropdown react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related