CODEWITHSUNDEEP
reactjsreact-bootstrap
Bomber
Bomber

Reputation: 10957

select list default value doesnt work

I am rendering a react-bootstrap select list. When i set the default value my list doesnt default to it. The value is being set properly when i debug it, but the option won't change.

Looping through options array and creating each option:

render: function() {
    let options = [];
    let label = '';
    let selectedValue = 0;

    for (let i = 0; i < this.props.options.length; i = i + 1) {
        if(this.props.options[i].isDefault){
            selectedValue = this.props.options[i].id;
        }

        label = this.props.options[i].contactName;
        let option;
            option = <option key={i} value={parseInt(this.props.options[i].id)}>{label}</option>;
        options.push(option);
    }

    return (
        <Input type='select' value={label} defaultValue={parseInt(selectedValue)} ref='select' className='input-sm bottom-buffer' onChange={this.handleSelect}>
            {options}
        </Input>
    )
}

How would I set the default value?

Upvotes: 1

Views: 5887

Answers (1)

OriolBG
OriolBG

Reputation: 2037

This is because you are using value. Right now your code is forcing each time it renders to select the value of variable label. And every render you are setting that label to the last option you introduce.

You have to remove value = {label}.

Check Forms | React in order to see the detail.

Upvotes: 1

Related Questions