I've done plenty of searches but couldn't get this to work. Seems quite straightforward. I am using Bootstrap-multiselect by the way. 

```
class MyProject extends React.Component {
constructor(props) {
    super(props);
    this.state = { searchForm: { status: ["VALUE2","VALUE4"], otherprops: "blah" }, otherStates: "blah"};
    }

//blah blah
render() {
return (
<select id="example-multiple-selected" multiple="multiple" defaultValue={this.state.searchForm.status} onChange={(event) => this.state.searchForm.status = event.target.value}>
    <option value="VALUE1">VALUE1</option>
    <option value="VALUE2">VALUE2</option>
    <option value="VALUE3">VALUE3</option>
    <option value="VALUE4">VALUE4</option>
    <option value="VALUE5">VALUE5</option>
    <option value="VALUE6">VALUE6</option>
    <option value="VALUE7">VALUE7</option>
    <option value="VALUE8">VALUE8</option>
</select>
)
}}

```

**PROBLEM**

1. Default values (VALUE2 and VALUE4) are not getting selected;
2. Nothing seems happening when I change selected options

**EDIT**

Seems everyone is talking about the fact that I am not setting state correctly, which I absolutely agree. It was a silly mistake I made. 
However, the fundamental problem I am facing still remains:

1. as I mentioned, default values are not getting populated;
2. onStatusChanged function is not triggered at all. I put debug point in this function but the debug point was not reached at all when I changed selected options. 

onStatusChanged = (e) => {
 let search = this.state.searchForm;
 search.status = e.target.selectedOptions;
 this.setState({
 searchForm: search
 })
}

`<select id="example-multiple-selected" multiple="multiple" defaultValue={this.state.searchForm.status} onChange={this.onStatusChanged}>`

**EDIT 2**

Latest code:

```
class MyProject extends React.Component {
    constructor(props) {
        super(props);
        this.state = { searchForm: { status: ["VALUE2","VALUE4"], otherprops: "blah" }, otherStates: "blah"};
        this.onStatusChanged = this.onStatusChanged.bind(this);
        }

    //blah blah
    onStatusChanged = (e) => {
        let search = this.state.searchForm;
        search.status = e.target.selectedOptions;
        this.setState({
            searchForm: search
        })
    }

    render() {
    return (
    <select id="example-multiple-selected" multiple="multiple" value={this.state.searchForm.status} onChange={this.onStatusChanged}>
        <option value="VALUE1">VALUE1</option>
        <option value="VALUE2">VALUE2</option>
        <option value="VALUE3">VALUE3</option>
        <option value="VALUE4">VALUE4</option>
        <option value="VALUE5">VALUE5</option>
        <option value="VALUE6">VALUE6</option>
        <option value="VALUE7">VALUE7</option>
        <option value="VALUE8">VALUE8</option>
    </select>
    )
}}

```

To re-iterate problems I am facing:

1. as I mentioned, default values are not getting populated;
2. onStatusChanged function is not triggered at all. I put debug point in this function but the debug point was not reached at all when I changed selected options. Seems like onChange was not detected.

By the way, in case it helps, I am using ***Bootstrap-multiselect*** plugin.