title: Why is select option not displayed in select input field?
body: <p>I am working with <code>react.js</code>, the problem is there that I have a <code>select</code> input field, I get data from <code>Api</code> and set to it's <code>option</code>, but when I want to select the <code>second option</code> or anything else, it does not select, just selects the first one. When I send data to the server it does not have any value. It is empty.</p>
  <p><strong>Here is my select.jsx:</strong></p>
  <pre><code>import React from &quot;react&quot;;
     const Select = ({ name, label, options, error, ...rest }) =&gt; {
     return (
         &lt;div className=&quot;form-group&quot;&gt;
         &lt;label htmlFor={name}&gt;{label}&lt;/label&gt;
             &lt;select name={name} id={name} {...rest} className=&quot;form-control&quot;&gt;
                 {options.map(option =&gt; (
                 &lt;option key={option.id} value={option.id}&gt;
                 {option.name}
                 &lt;/option&gt;
                ))}
             &lt;/select&gt;
         {error &amp;&amp; &lt;div className=&quot;alert alert-danger&quot;&gt;{error}&lt;/div&gt;}
      &lt;/div&gt;
    );
  };
  export default Select;
  </code></pre>
  <p><strong>This is renderSelect function:</strong></p>
  <pre><code> renderSelect(name, label, options) {
      const { data, errors } = this.state;
      console.log(data[name]);
      return (
  
          &lt;Select
              name={name}
              value={data[name]} 
              label={label}
              options={options}
              onChange={this.handleChange}
              error={errors[name]}
          /&gt;
      );
  }
  </code></pre>
  <p><strong>This is the state and API:</strong></p>
  <pre><code>state = {
  data:{name:'',username:'',email:'',role:'',password:''},
  roles:[],
  errors:{}
  };
  async componentDidMount() {
     const { data: role } = await axios.get(config.apiEndpont + '/getRole');
     this.setState({ roles: role.roles });
  
  }
  </code></pre>
  <p><strong>This is handleChange:</strong></p>
  <pre><code>handelChange = ({ currentTarget: input }) =&gt; {
      const errors = { ...this.state.errors };
      const errorMessage = this.validateProperty(input);
      if (errorMessage) errors[input.name] = errorMessage;
      else delete errors[input.name];
      
      const data = { ...this.state.data };
     
      data[input.name] = input.value;
      this.setState({ data, errors });
  }
  </code></pre>
  <p><strong>And this is the form:</strong></p>
  <pre><code>return (
    &lt;div&gt;
      &lt;h4&gt;Create New User&lt;/h4&gt;
      &lt;form onSubmit={this.handleSubmit}&gt;
        {this.renderInput(&quot;name&quot;,&quot;Name&quot;)}
        {this.renderInput('username','Username')}
        {this.renderInput('email','Email','email')}
        {this.renderSelect('role','Role',this.state.roles)}
        {this.renderInput('password','Password','password')}
        {this.renderButton('Save')}
      &lt;/form&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p><strong>View:</strong>
  <a href="https://i.stack.imgur.com/jGyV1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jGyV1.png" alt="enter image description here" /></a></p>