By vjr


2019-06-12 06:17:20 8 Comments

I am trying to populate a semantic-ui-react drop-down with the first value(from the options parameter). But I am unable to do the same . Values for this dropdown I am fetching it from backend and then mapping it to a format supported by semantic-ui-react select.

Help would be appreciated.

  //state object
   this.state = {
                  users: [] ,
                  selectedUser: '',
                  defaultUser: string
   }
  //fetch call to get the values and then transforming 
  async componentDidMount()
  {
      try {       
             let data = await fetch('/api/fetch/users')
             let users =  await data.json();
             users = users.map((obj:any) => ({            //formatting the list to support options array of semnatic-ui-react select
                                              key: obj.id,
                                              text: obj.name,
                                              value: obj.name
                                        }));
             this.setState({users},defaultUser: users[0].value); //setting the dropdown with first value, but it is not happening

     }
     catch(e){
         console.log('Error', e.message);
     }
  } 


   //onchange handler
   dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
     this.setState(prevState => ({
                [data.name]: data.value
     }));
    }

  //Inside render, Select

   <Select 
                             options={this.state.users} 
                             name="selectedUser"  
                             value={this.state.selectedUser}
                             onChange={this.dropdownChange}  
                             defaultValue = {this.state.defaultUser}  
   />

1 comments

@Ovidiu G 2019-06-12 07:04:42

I think you don't need the defaultValue prop. You can check out the codesandbox bellow. I used react hooks but you get the point.

https://codesandbox.io/s/heuristic-wiles-eq7su

For your particular code:

import React from "react";
import ReactDOM from "react-dom";
import { Select } from "semantic-ui-react";


class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      users: [],
      selectedUser: ""
    };
  }
 async componentDidMount(){
  try {       
         let data = await fetch('/api/fetch/users')
         let users =  await data.json();
         users = users.map((obj:any) => ({
                                          key: obj.id,
                                          text: obj.name,
                                          value: obj.name
                                    }));

         this.setState({users}, () => {
            this.setState({selectedUser: this.state.users[0].value});
         })

 }

  //onchange handler
  dropdownChange = (event, data) => {
    this.setState({ selectedUser: data.value });
  };

  render() {
    return (
        <Select
          onChange={this.dropdownChange}
          placeholder="Select a user"
          value={this.state.selectedUser}
          selection
          options={this.state.users}
        />
    );
  }
}

@vjr 2019-06-12 07:14:33

Thanks for the reply. It is using a latest react version . Something that is similar to my snippet in the question would be really great!

@Ovidiu G 2019-06-12 07:21:27

Ok, I'll update the codesandbox.

@Ovidiu G 2019-06-12 07:31:32

You can check now. I updated the code to use lifecycle methods and this.state.

@vjr 2019-06-12 07:36:52

It is giving the following error " Argument of type '(state: any) => void' is not assignable to parameter of type '() => void' " . I am using typescript with react

@Ovidiu G 2019-06-12 07:44:08

I updated the answer for your particular code. Can you try it and see if it works?

@vjr 2019-06-12 08:46:46

Related Questions

Sponsored Content

26 Answered Questions

[SOLVED] React js onClick can't pass value to method

  • 2015-04-22 23:40:14
  • user1924375
  • 424175 View
  • 531 Score
  • 26 Answer
  • Tags:   javascript reactjs

2 Answered Questions

3 Answered Questions

2 Answered Questions

1 Answered Questions

Dropdown list not showing default item

0 Answered Questions

1 Answered Questions

[SOLVED] react-dropdown - display will not change if setState is called

  • 2018-05-25 00:47:55
  • J Seabolt
  • 301 View
  • 1 Score
  • 1 Answer
  • Tags:   javascript reactjs

1 Answered Questions

Semantic UI React, Dropdown Selection

15 Answered Questions

[SOLVED] jQuery: Best practice to populate drop down?

  • 2009-05-02 16:10:55
  • Jeff Putz
  • 335909 View
  • 263 Score
  • 15 Answer
  • Tags:   jquery select

Sponsored Content