React Dropdown menu not showing the selected element

February 17, 2021 by admin

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.