I have a form set up with a Select dropdown that is populated dynamically from the server.
The issue I'm facing is that after selecting an option from the dropdown and then saving or canceling the form, the selected value remains in the field when I reopen the form.
How can I fix this problem? Here's my code:
class Task extends Component{
constructor(props){
super(props);
this.state={
SelectedName:'',
TaskList:[],
}
}
componentWillMount(){
fetch(
...
.then(responseJson => {
let taskList=responseJson.data;
let r = taskList.map(function(task){
return {value: task.id, display: task.name}
});
this.setState({TaskList:r });
}
//this is cancelForm fucntion
cancelSave=()=>{
this.setState({SelectedName:''});
}
handleNameSelection=()=>{
var row = this.state.TaskList.filter(function (item) {
return item.value == event.target.value
})
this.setState({ SelectedName: row[0].display});
}
render(){
return(
<Select
defaultValue="placeholder-item"
id="select-task-name"
labelText="Select Task Name"
value={this.state.SelectedName}
onChange={(event) => this.handleNameSelection(event)}
>
{
(this.state.TaskList.length > 0) ?
this.state.TaskList.map(function (list, idx) {
return <option key={idx}
value={list.value}>{list.display}</option>
})
:
<option />
}
</Select>
);
}
}