React Dropdown menu not showing the selected element

I’m a beginner with React. In the code below I’m basically reading data from a db using flask api and returning data based on the option selected from a Dynamic dropdown list which also picks options to display from another flask api.

import React, {Component} from 'react'
import axios from 'axios';
import Select from 'react-select';

class ListUser extends Component{


  constructor(props){
    super(props)

    this.state={
        userList:[],
        selected_eml:[],
        selected_email:'',
        user_list:[]
    }
  }

  componentDidMount(){

        axios.get('/getuserList',{crossDomain: true})
          .then(response => {
              if (response.status === 200 && response != null){
                console.log("user list",response.data)
                  this.setState({ userList : response.data,selected_eml:response.data});
                }
            })
  }        

  selectedUserHandler(event){
    this.setState({selected_eml: event.label})
    let email = event.value
    axios.get('/getUserlisting/'+email).then(response=>{
      if (response.status === 200 && response != null){
        this.setState({ user_list : response.data });
        console.log(response.data)
      } else {console.log("error")}
    })
   } 

componentDidUpdate(){
    let email = this.state.selected_eml
    axios.get('/getUserlisting/'+email).then(response=>{
      if (response.status === 200 && response != null){
        if(JSON.stringify(this.state.user_list) != JSON.stringify(response.data)){
        this.setState({ user_list : response.data, selected_email:response.data });
        console.log(response.data)
      }
      } else {console.log("error")}
    }) 
  }    

  render(){
    var filter_user_list=[]

    for (var key in this.state.selected_eml) {
            console.log(this.state.selected_eml[key]['value'])
            filter_user_list.push(this.state.selected_eml[key]['value'])
          }
          console.log(filter_user_list)

    return(
    <div>
      <div className="App">
        <table><tbody>
                  <tr>
                    <th ><label> Email </label></th>
                     <td style= {{ width:"300px"}}>
                      <Select
                        placeholder= "Select User Email"
                        options={this.state.userList} value={this.state.selected_eml}
                        onChange={this.selectedUserHandler.bind(this)}
                       />
                      </td>
                  </tr>
          </tbody></table>
        </div>
        <br />
        <br />
        <div>
          <h4 align="center">User List</h4>
          <table className="table table-striped" style={{ marginTop: 10, border : 1 }} >
            <thead>
              <tr>
                <th>User ID</th>
                <th>Email</th>
                <th>P ID</th>
                <th>P Name</th>
              </tr>
            </thead>
            <tbody align="center">
             { this.state.user_list.map((mp, index)=><tr>
                <td> {mp.user_id} </td>
                <td> {mp.email} </td>
                <td> {mp.id} </td>
                <td> {mp.name} </td>
              </tr>) }
            </tbody>
          </table>
        </div>
        </div>
      )

    }
}    

export default ListUser;

The problem I’m facing is that when I select an option from the dropdown, it returns data fine but doesn’t show the option selected in the dropdown placeholder bar. I’ve tried passing selected_eml with bind(this) in selectedUserHandler function being passed in onChange and getOption methods but with no luck.

Also, if there is any way to make the code more efficient and improve quality, inputs are most welcome.

12 thoughts on “React Dropdown menu not showing the selected element”

  1. the selected value for the Select needs to have this object format of {value: sth, label: sth} in order to be displayed in the select container. And since you’ve assigned the event.label to the selected_eml, it does not show up in the select container. To fix this, you just need to do: this.setState({selected_eml: event})

    Reply

Leave a Comment