semantic ui react Setting dropdown value to state

Question

how to have dropdowns selected value in state.here is my code iam getting value for name field but dropdown not working, can anyone find out what i am missing?

MyComponent.js

import React,{Component} from 'react';

class MyComponent extends Component{
state={
   data:{
       name:'',
       subject:''  
   }
}

 onChange = e =>
    this.setState({
        data: { ...this.state.data, [e.target.name]: e.target.value }
    },()=>{
        console.log(this.state.data);
    }
    )

render(){
const {data}=this.state;
const subjects= [
              {text: '1',value: 'kannada'},
              {text: '2', value: 'english'},
              {text: '3',value: 'hindhi'}
            ]
return(
<div>
            <Input 
             name="name"
             onChange={this.onChange} 
             placeholder='Your name ...' 
            />
            <Dropdown 
             placeholder='Select Subject'
             name="subject"
             onChange={this.onChange}
             selection 
             options={subjects} 
             />
</div>

)
}
}
export default MyComponent;

how to have selected dropdown value in state?, iam getting changed value for name field but for dropdown not getting.

score 17 · Accepted Answer · edited May 20 '19 at 00:53

17

handleChange = (e, { value }) => this.setState({ value })

Add value prop to Dropdown

      render(
          const { value } = this.state;
        return(
         <Dropdown 
         placeholder='Select Subject'
         name="subject"
         onChange={this.handleChange}
         selection 
         options={subjects} 
         value={value}
         />)
       )

edited May 20 '19 at 00:53

Shubham Chadokar

1,286
12
34

answered Mar 13 '18 at 05:03

Omar

3,044
2
19
31

1

i tried that also adding value prop to dropdown, even though if i don't had value prop also for name field setting value correctly, incase of dropdown not working. – Srikanth Gowda Mar 13 '18 at 05:17
yeah but still your handle change function showing syntax error. – Srikanth Gowda Mar 13 '18 at 05:38
1

handleChange = (e, { value }) => this.setState({ value }) this worked for me, now i have dropdown selected value in "this.state.value" – Srikanth Gowda Mar 13 '18 at 05:39

Sameer Ingavale · Answer 2 · 2019-10-28T16:45:17.917

If anyone is using react hooks and semantic ui react, this is how I got it to work, without having to create a separate change handler function for it.

const options = [
    { key: "1", text: "Speaker", value: "SPEAKER" },
    { key: "2", text: "Event Planner", value: "EVENT_PLANNER" }
  ];

const [values, setValues] = useState({
    firstName: "",
    userType: ""
  });

const onChange = (event, result) => {
    const { name, value } = result || event.target;
    setValues({ ...values, [name]: value });
  };

<Form.Dropdown
  placeholder="I am a.."
  name="userType"
  label="User Type"
  selection
  onChange={onChange}
  options={options}
  value={values.userType}
  />

What kept throwing me off was the 'result' that the onChange function takes as an argument. Since the options are stored as objects in an array, the correct way to access their values is with the 'result' and not 'event.target.'

What about the key. Is there any way to get the key to onChange event? — João Pereira, May 12 '20 at 00:17
Thank you Sameer! The documentation is hidden a bit: https://react.semantic-ui.com/modules/dropdown/#usage-controlled — thul, Feb 26 '21 at 21:08

score 1 · Answer 3 · answered Feb 25 '19 at 15:50

One more way to use DropDown in React Semantic. it worked perfectly for me.

const options = [
    { key: 'ex1', text: 'Example 1', value: 'Example 1' },
    { key: 'ex2', text: 'Example 2', value: 'Example 2' },
]

Method to set value

handleSelectChange=(e,{value})=>this.setState({stateValue:value})

In Form

<Form.Select fluid label='List Example' options={options}
placeholder='List Example' 
value={value} 
onChange={this.handleSelectChange} />

score 0 · Answer 4 · answered May 19 '19 at 09:45

You can use the Form.Field also.
For more information.

constructor(props) {
   super(props);
   this.state={
      subject : ""
   }
}

handleChange = (e, result) => {
  const { name, value } = result;
  this.setState({
     [name]: value
    });
};

render() {
  const options = [
    { key: 'ex1', text: 'Example 1', value: 'Example 1' },
    { key: 'ex2', text: 'Example 2', value: 'Example 2' },
  ];

  return(
   <div> 
      <Form>
         <Form.Field 
            placeholder="Subject"
            name="subject"
            label="Subject"
            control={Dropdown}
            fluid
            selection
            onChange={this.handleChange}
            options={options}
            value={this.state.subject}
         />
      </Form>     
   </div>
  );
}

semantic ui react Setting dropdown value to state

4 Answers4