title: React - Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>
body: <p>How to resolve this warning?</p>
  
  <blockquote>
    <p>Warning: Use the <code>defaultValue</code> or <code>value</code> props on  instead of setting <code>selected</code> on <code>&lt;option&gt;</code>.</p>
  </blockquote>
  
  <p>This has been asked once before but the solution does not help me. I cannot set selected because the value here is from a Redux state (if present). If redux state has no values, it should show default option - "Select gender"</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, { Component } from 'react'
  import InputGender from '../../edit-profile/gender-input'
  ...
  ...
  
  &lt;InputGender value={gender} change={this.change} /&gt;
  </code></pre>
  
  <p>And here is InputGender</p>
  
  <pre><code>import React from 'react'
  import PropTypes from 'prop-types'
  import Select from '../others/input/select'
  
  const InputGender = ({ value, change }) =&gt; (
    &lt;div className="edit_gender_div"&gt;
      &lt;Select
        placeholder="Select option"
        value={value}
        valueChange={e =&gt; change('gender', e)}
        className="edit_gender mb-2"
      &gt;
        &lt;option value="" disabled selected&gt;
          Select Gender
        &lt;/option&gt;
        &lt;option&gt;Male&lt;/option&gt;
        &lt;option&gt;Female&lt;/option&gt;
        &lt;option&gt;Other&lt;/option&gt;
      &lt;/Select&gt;
    &lt;/div&gt;
  )
  
  InputGender.propTypes = {
    value: PropTypes.string.isRequired,
    change: PropTypes.func.isRequired,
  }
  
  export default InputGender
  </code></pre>