title: useState for Dropdown elements - ReactJS
body: <h2>Problem</h2>
  <p>When I select an option the the dropdown menu, nothing gets selected as the value of <code>role</code> is an empty string. The UI framework used is Semantic UI.</p>
  <h2>How the program works</h2>
  <p>When the user inputs on the Input fields the function <code>onChange</code> takes the input and savges it onto the empty string in <code>values</code>. However this is invalid when the Input type is a Dropdown Menu with predefined inputs. Hence, when the user selects any of the options it automatically gets turned to an empty string.</p>
  <p>I am not able to understand how to solve this issue.</p>
  <h2>The Code</h2>
  <pre><code> const [values, setValues] = useState({
        username: '',
        password: '',
        confirmPassword: '',
        email: '',
        role: '' // This here seems to be the issue.
    })
  
  //OnChange Function (works for Input types)
  
   const onChange = (e) =&gt; {
          setValues({...values, [e.target.name]: e.target.value});
   }
  
  //FormInput for reference (working)
  
  &lt;Form.Input 
        label=&quot;Full Name&quot;
        placeholder=&quot;Full Name&quot;
        type=&quot;text&quot;
        name=&quot;username&quot;
        value={values.username}
        onChange={onChange}
  /&gt;
  
  
  //DropDown menu from SemanticUI
  
  &lt;Dropdown
      placeholder=&quot;Select Role&quot;
      name=&quot;role&quot;
      fluid
      selection
      options={options}
      value={values.role}
      onChange={onChange}
  /&gt;
  
  //Options for Dropdown Menu
  
  const options =[
          {
              key: 'Client',
              text: 'Client',
              value: 'Client'
          },
          {
              key: 'Employee',
              text: 'Employee',
              value: 'Employee'
          }
      ]
  </code></pre>
  <p>Update: added <code>&quot;name&quot;=role</code> in the dropdown menu. However still does not work.</p>
  <h2>Screenshot before selecting dropdown Item</h2>
  <p><a href="https://i.stack.imgur.com/CyQCU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CyQCU.png" alt="img1" /></a></p>
  <h2>Screenshot after selecting dropdown Item</h2>
  <p><a href="https://i.stack.imgur.com/OIZos.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OIZos.png" alt="img2 after filled up" /></a></p>
  <p>Update : Added images for reference</p>