React select onChange doesn't use the options value

Question

I have this select component

<select
    value={(this.state.selectedVersion)}
    disabled={(this.state.versionDisable)}
    onChange={this.handleVersionChange}
>
    <option disabled hidden>Välj version</option>
    {
        this.state.versions.map((object, i) => {
            return (
                <option key={i} value={object}>
                    {object.text}{object.lastModified}
                </option>
            )
        })
    }
</select>

here I want the onChange event to take the options value which I have logged is the thing I want and use it as value but when I send it to my onChange handler

handleVersionChange(event){
    console.log(event);
    this.setState({selectedVersion: event.target.value});
    console.log(this.state.selectedVersion);
}

The first console.log that logs the event that got sent I get some proxy object that I don't know what it is or were it is from. I don't know if I get this problem since I created the options with the map. Anyone know what I am doing wrong?

Possible Duplicate of [uncaught-typeerror-cannot-read-property-state-or-props-of-undefined](https://stackoverflow.com/questions/39503559/uncaught-typeerror-cannot-read-property-state-or-props-of-undefined/39503728#39503728) or [setstate-doesnt-update-the-state-immediately](https://stackoverflow.com/questions/41278385/setstate-doesnt-update-the-state-immediately/41278440#41278440) — Shubham Khatri, Apr 13 '18 at 12:08
My best guess is that the value you are assigning to the `value` attribute is an Object where it should be string. Can you try replacing `value={object}` with `value={object.text}` on your option element and see if it helps? — Chirag Ravindra, Apr 13 '18 at 12:13
@ChiragRavindra it is an object the value but i need the selectedVersion to be that obejct not the text of it but the whole object. If i set the value as value={object.text} the state will only be the text and not the object. — novafluff, Apr 13 '18 at 12:16
@novafluff you can still get use a simple string/number as the `value` attribute and get the full object later in your handler to process it. I don't think setting the `value` attribute to an Object would work. See my answer below. — Chirag Ravindra, Apr 13 '18 at 12:58

score 1 · Accepted Answer · answered Apr 13 '18 at 12:52

I still think the problem is setting the value attribute on the option element as an Object. Consider using a string instead. You can always reverse lookup a value in your change handler from the original array to get the full object.

In the following example I use an attribute I created called id to use as the select option value. This value can be any unique identifier in your object which is a simple type like string or number. The same value can be used to reverse lookup the full object

Sample JS Fiddle

class SelectApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
     items: [
       { text: "Learn JavaScript", id: 1 },
        { text: "Learn React", id: 2 },
        { text: "Play around in JSFiddle", id: 3 },
        { text: "Build something awesome", id: 4 }
      ]
    }
    selected:null
  }
  
  handleChange = (e)=>{
    // Get the selected value which is a string
   var selectedId = e.target.value;
    console.log(selectedId);
    // Reverse look up on the array to find the full object
    var selected = this.state.items.find((d)=>(d.id==selectedId));
    console.log(selected);
    // Update state with object
    this.setState({selected});
  }
  
  render() {
    return (
      <div>
        <select onChange={this.handleChange}>
        <option disabled selected>Select</option>
        {this.state.items.map((item, i) => (
         <option key={i} value={item.id}>{item.text}</option>
        ))}
        </select>
      </div>
    )
  }
}

ReactDOM.render(<SelectApp />, document.querySelector("#app"))

this solved it! i thought yo could send objects but apperntly not. so i used this and now it gets the whole object and all works! — novafluff, Apr 13 '18 at 13:01

score 0 · Answer 2 · answered Apr 13 '18 at 12:06

0

Your handleVersionChange need to be a listen function. Replace by this :

 handleVersionChange = (event) => {
     console.log(event);
     this.setState({selectedVersion: event.target.value});
     console.log(this.state.selectedVersion);
 }

Or in your constructor add :

this.handleVersionChange = this.handleVersionChange.bind(this)

answered Apr 13 '18 at 12:06

LaPoule

324
1
11

i already got the binding in the constructor missed to add that! the problem is only that it doesnt take the options value to the onChange. if i missed the binding i would probably get an undefined error. – novafluff Apr 13 '18 at 12:09
Did you try to log `event.target.value` ? – LaPoule Apr 13 '18 at 12:23
yeah then i only get an [object, object] wich says nothing – novafluff Apr 13 '18 at 12:24
and `event.target.value.text` or `event.target.value.lastModified` ? – LaPoule Apr 13 '18 at 12:38

score 0 · Answer 3 · answered Apr 13 '18 at 12:33

0

Why do you put another pair of braces inside curly ones: {(this.state.selectedVersion)}? Am I missing something: {this.state.selectedVersion}?

answered Apr 13 '18 at 12:33

Elkhan Mamedov

91
9

nah thats just a mistake by me but the still dont change anything but thanks for the input! – novafluff Apr 13 '18 at 12:36
I would setState in the onChange handler and handleVersionChange would read from the state – Elkhan Mamedov Apr 13 '18 at 12:43

William Chou · Answer 4 · 2018-04-13T12:58:52.480

0

Trying console logging in componentWillReceiveProps instead of inside your handle change function.

SetState is asynchronous.

edited Apr 13 '18 at 12:58

answered Apr 13 '18 at 12:49

William Chou

752
5
16

React select onChange doesn't use the options value

4 Answers4