The selection field does not change after changing the value from redux-devtools

Question

locale is in my redux application state. Changing its value with response-devtools (the return option) changes the internal value of the paragraph, but not the value of the selection field. If it displays again, should it not take the same value as inside the p tag?

import React, {Component, PropTypes} from 'react' import {defineMessages, injectIntl, intlShape} from 'react-intl' const messages = defineMessages({ spanish: { id: 'languageSelector.spanish', description: 'Select language', defaultMessage: 'Spanish' }, english: { id: 'languageSelector.english', description: 'Select language', defaultMessage: 'English' }, french: { id: 'languageSelector.french', description: 'Select language', defaultMessage: 'French' } }) class LanguageSelector extends Component { render () { const {formatMessage, locale} = this.props.intl return ( <div> <select defaultValue={locale} onChange={(e) => this.handleChange(e)}> <option id='es' value='es'>{formatMessage(messages.spanish)}</option> <option id='fr' value='fr'>{formatMessage(messages.french)}</option> <option id='en' value='en'>{formatMessage(messages.english)}</option> </select> <p>{locale}</p> </div> ) } handleChange (e) { this.props.onChange(e.target.value) } } LanguageSelector.propTypes = { intl: intlShape.isRequired, onChange: PropTypes.func.isRequired } export default injectIntl(LanguageSelector) 

Answer 1

Change defaultValue to value . i.e.

 <select value={locale} onChange={(e) => this.handleChange(e)}> 

Explanation

Use only defaultValue when the form field is an uncontrolled component . The only way to change the value of an uncontrolled component is through user input.

If you use value , then the form component is considered a managed component . Its value can be changed in subsequent renders, setting the value explicitly. Controlled components should also have an onChange handler, which yours does.

For more information about the controlled / uncontrolled components of a form, see Forms in React .