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.

Shubham Chadokar · Accepted Answer · 2019-05-20 00:53:19Z

19

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, 2019 at 0:53

Shubham Chadokar

2,8531 gold badge29 silver badges47 bronze badges

answered Mar 13, 2018 at 5:03

Omar K

3,4213 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Srikanth Gowda Over a year ago

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 Over a year ago

yeah but still your handle change function showing syntax error.

Srikanth Gowda Over a year ago

handleChange = (e, { value }) => this.setState({ value }) this worked for me, now i have dropdown selected value in "this.state.value"

Sameer Ingavale · Accepted Answer · 2019-10-28 16:45:17Z

12

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.'

edited Oct 28, 2019 at 16:45

answered Oct 15, 2019 at 9:11

Sameer Ingavale

2,2101 gold badge14 silver badges9 bronze badges

2 Comments

João Pereira Over a year ago

What about the key. Is there any way to get the key to onChange event?

thul Over a year ago

Thank you Sameer! The documentation is hidden a bit: react.semantic-ui.com/modules/dropdown/#usage-controlled

Hirak JD · Accepted Answer · 2019-02-25 15:50:41Z

2

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} />

answered Feb 25, 2019 at 15:50

Hirak JD

1912 silver badges7 bronze badges

Comments

Shubham Chadokar · Accepted Answer · 2019-05-19 09:45:32Z

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>
  );
}

tuHin__ · Accepted Answer · 2024-09-22 07:23:00Z

0

You can use textContent from semantic dropdown. This gets the value of selected subjects.text

handleChange = (e) => this.setState(e.target.textContent)

answered Sep 22, 2024 at 7:23

tuHin__

111 silver badge4 bronze badges

Collectives™ on Stack Overflow

semantic ui react Setting dropdown value to state

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related