Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>

[CWSites]

I'm getting an error in my console on one of my select2 wrappers and I don't see it using selected anywhere so I'm not sure why this is occurring.

Console Warning

Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>

HTML rendered in browser.

<select class="form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true">
    <option value="users">Users (ID)</option>
    <option value="date">Date</option>
    <option value="machines">Machines</option>
</select>

Component

<FormGroup>
    <Label className="control-label">Look up by</Label>
    <Select2 className="form-control" ref="look-up-by"
        onChange={this.props.updateLookup.bind(this)}
        value={comparison}
        data={lookupAvailable}
    />
</FormGroup>

Variables

comparison = 'users'
lookupAvailable = [
    {
        id: 0,
        selected: true,
        text: "Users (ID)",
        value: "users"
    },{
        id: 1,
        text: "Date",
        value: "date"
    }
];

[rkit]

Thanks for the details. This is React warning. You can use defaultValue or value to set an initial value.

See: https://reactjs.org/docs/forms.html#the-select-tag

[CWSites]

@rkit I am using value, I think the issue is when I'm building the data select2 uses selected: true which is causing an issue. This data is populated based on an API response so I don't have access to it before that.

I know this is a React warning, but I am pretty sure it's in regards to this library.