CODEWITHSUNDEEP
javascriptjqueryreactjsuse-state
Mazino
Mazino

Reputation: 356

useState for Dropdown elements - ReactJS

Problem

When I select an option the the dropdown menu, nothing gets selected as the value of role is an empty string. The UI framework used is Semantic UI.

How the program works

When the user inputs on the Input fields the function onChange takes the input and savges it onto the empty string in values. 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.

I am not able to understand how to solve this issue.

The 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) => {
        setValues({...values, [e.target.name]: e.target.value});
 }

//FormInput for reference (working)

<Form.Input 
      label="Full Name"
      placeholder="Full Name"
      type="text"
      name="username"
      value={values.username}
      onChange={onChange}
/>


//DropDown menu from SemanticUI

<Dropdown
    placeholder="Select Role"
    name="role"
    fluid
    selection
    options={options}
    value={values.role}
    onChange={onChange}
/>

//Options for Dropdown Menu

const options =[
        {
            key: 'Client',
            text: 'Client',
            value: 'Client'
        },
        {
            key: 'Employee',
            text: 'Employee',
            value: 'Employee'
        }
    ]

Update: added "name"=role in the dropdown menu. However still does not work.

Screenshot before selecting dropdown Item

img1

Screenshot after selecting dropdown Item

img2 after filled up

Update : Added images for reference

Upvotes: 0

Views: 1092

Answers (3)

Vicktor Moberg
Vicktor Moberg

Reputation: 39

I ran into the same issue with a form I'm making and my solution isn't DRY at all, but it works.

 <select name="State" id="state" value={props.formInputs.state} onChange={props.handleChange}> 
           <option id="state" value="Alabama">AL</option>
           <option id="state" value="Alaska">AK</option>
For each option in the drop down, I added the id="state" for my handleChange() and it was able to then take whatever option was selected from the drop down menu and put it into my object to pass to my database.

And my change handler and useState() hooks are below:

const [state, setState] = useState({
prayer_request:{
name: '',
state:'',
temptation:'',
}
})
const handleChange = (event) =>{
const updateInput = Object.assign({}, formInputs, { [event.target.id]: 
event.target.value}, )
updateFormInputs(updateInput)
}
const [requests, setRequests] = useState([])
const [formInputs, updateFormInputs] = useState({
name: '',
state: state,
temptation: state,
})

Upvotes: 1

Sohaib
Sohaib

Reputation: 11297

Your Dropdown onChange should be something like this

 const onChange = (e, {value}) => {
    setValues({...values, role: value});
 }

Refer to controlled input demo here: https://react.semantic-ui.com/modules/dropdown/#usage-controlled

EDIT: If you don't want to update your onChange function then perhaps this would do it.

<Dropdown
    placeholder="Select Role"
    fluid
    selection
    options={options}
    value={values.role}
    onChange={(e, {value}) => onChange({
     target: {name: 'role', value}
    })}
/>

Upvotes: 3

Enis Gur
Enis Gur

Reputation: 89

    <Dropdown
        placeholder="Select Role"
        name="role"
        id="role"
        fluid
        selection
        options={options}
        value={values.role}
        onChange={onChange}
    />

on Dropdown props:

  • add name="role"

  • Reason why you need to provide "name" prop on each form element to get value on onChange function.

  • onChange functions looks "e.target.name" which is you didn't provide any "name" prop on your Dropdown Input.

Upvotes: 0

Related Questions