Update the value of a dropdown menu in ReactJS

Question

In an html form, I have this select menu. It’s like a profile that a user can edit it later and change the values. Here is the FirstComponentcode that is rendering the form:

export const FirstComponent = React.createClass({
    handleLanguageCode: function(langValue) {
        this.setState({
            language: langValue
        });
    },

    renderField() {
     return (
            <div>
                <SelectLanguage onSelectLanguage={this.handleLanguageCode} defValue={getValue()} /> 
            </div> 
            );           
    }
)}

If the user wants to edit the form, getValue() will send the current value to SelectLanguage Component. The following is the code for this component:

import { DropdownList } from 'react-widgets';
    export const SelectLanguage = React.createClass({
        getInitialState: function(){
            return{
                value: '',
            };
        },

        handleLangChange: function (val) {
            var name = val.name
            //this.props.onSelectLanguage(val.id); //???
            //this.props.defValue(name);           //???
            //this.setState({defValue: name});    //???
            //this.state.value = defaultVal       //???
        },

        componentWillMount() {
            this.componentWillReceiveProps(this.props);
        },

        componentWillReceiveProps(props) {
            var def = this.props.defValue || 'eng';
            this.setState({value:def});
        },

        render() {
            const languages = [{"id": "eng", "name": "english"}, {"id": "swd", "name": "swedish"}] // it's a big json array!!
                return (
                    <div >
                        <DropdownList 
                            ref='dropdown'
                            data={languages} 
                            valueField='id'
                            textField={item => item.name}
                            caseSensitive={false} 
                            filter={this.filterLanguage}
                            value={this.state.value}
                            onChange={this.handleLangChange} />
                    </div>            
                );
        }
    });

The problem is when the user selects a new value from the dropdown menu, it doesn't update it!! It still shows the previous value. I don't know how to write the handleLangChange function to handle it. I tried several ways but couldn't get the result :/ Can anyone help me to fix it?

Vivian · Accepted Answer · 2016-08-08 11:58:33Z

0

You need to use this.props.onSelectLanguage(val.id);

You need to do binding as well, so:

onSelectLanguage={this.handleLanguageCode.bind(this)}

onChange={this.handleLangChange.bind(this)}

Ref: https://facebook.github.io/react/tips/communicate-between-components.html

edited Aug 8, 2016 at 11:58

answered Aug 8, 2016 at 11:50

Vivian

1382 silver badges5 bronze badges

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

3 Comments

Birish Over a year ago

I just added your changes. I can see that now the handleLanguageCode is getting the new value (console.log(langValue); prints the new selected value). But the dropdown doesn't show the change yet. Also I'm getting this warning:

Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.

Birish Over a year ago

I also added these two lines to handleLangChange: this.setState({value: val.name}); and this.props.onSelectLanguage(val.id);

Birish Over a year ago

@ vivian : I think I don't really need bind, it apparently does it automatically!

Collectives™ on Stack Overflow

Update the value of a dropdown menu in ReactJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related