Cannot get initial value for the input select form

Question

I'm using react-select for my input fields. Everything works fine apart from getting the selected value inside the input once clicked. Also (as mentioned in the heading) I'm unable to see the initial value popping up in the select field although it is set in the code.

  render(){
    var Select = require('react-select');
    var options = [
        { value: '1', label: '1' },
        { value: '2', label: '2' }
    ];

    function logChange(val) {
      console.log(val);
    }
    return(

        <Select
          name="form-field-name"
          value="one"
          options={options}
          onChange={logChange}
        />

   );

All the events work fine (I can see then on my console.log but nothing changes on screen).

Here is the console.log and the rendering (null is because of the X icon-clear)

You forgot to add this keyword onChange={this.logChange}. Further look at this example github.com/JedWatson/react-select/blob/master/examples/src/… — DroidNoob
– DroidNoob, Commented Mar 17, 2017 at 8:48
that just worsens the things... No need for that... Nothing shows up in the console when add the this prefix — EugenSunic
– EugenSunic, Commented Mar 17, 2017 at 8:53

Kamil Latosinski · Accepted Answer · 2017-03-17 09:17:20Z

1

After reading the source code I am pretty sure you are passing the wrong value into the value prop.

expandValue tries to find the passed value (from value prop) inside options prop, and if it fails it returns undefined.

for (var i = 0; i < options.length; i++) {
    if (options[i][valueKey] === value) return options[i];
}

You are passing a string "one", which is not present in your options array.

options[i][valueKey] in your case would be either string "1" or "2". The valueKey === 'value', so this is retrieved from your options' object value property (you have same value inside label, so I want to stress this out, as it might be confusing).

Changing the value should do the trick

<Select
   name="form-field-name"
   value="1"
   options={options}
   onChange={logChange} />

Answering your comment question: I am not sure but this looks like controlled input to me. Your select value sits inside hidden input which uses the value from value prop. I think you must do something like this:

class MySelect extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            value: "1"
        }

        this.handleChange.bind(this)
    }

    handleChange(selectedValue) {
        this.setState({ value: selectedValue })
    }

    render() {
        return (
            <Select
                name="form-field-name"
                value={this.state.value}
                options={options}
                onChange={this.handleChange} />
        )
    }
}

edited Mar 17, 2017 at 9:17

answered Mar 17, 2017 at 8:55

Kamil Latosinski

8861 gold badge7 silver badges33 bronze badges

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

3 Comments

EugenSunic Over a year ago

I've got my initial value, tnx for that but how the value still doesn't change when i click on it should i add arguments on my logChange method?

Kamil Latosinski Over a year ago

It looks like controlled component to me (facebook.github.io/react/docs/forms.html#controlled-components). I think onChange function lets you set the value on the state that you should use instead.

EugenSunic Over a year ago

Tnx man. I thought that the react-select will do everything for me instead. But it seems that it doesn't..

Collectives™ on Stack Overflow

Cannot get initial value for the input select form

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