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.
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 theevent.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})