How do I change a drop down selection to its saved value upon rendering the page?

Question

My question is hard to explain but I hope I can describe it well enough for it to make sense. Essentially I have a form that saves employee data, and I have a section within the form that holds the employees secondary phone number. I have two drop down lists next to this that specify the times that the secondary number is available for contact reasons. I then save the form to our sql database after it is completed. I'm not sure if it's possible, but when I go to pull up this employees data from our application I want the drop down lists to be selected with the current values from before. Now I'm not sure if using select is the best route to go with this, or if I should be doing it a different way, any suggestions would help, thanks!

It would be good to note that this object that I'm receiving from the database is a JSON object that looks like this: {"From":"1:00pm", "To":"8:00pm"}. When that employee is selected in our application I am grabbing this information and parsing it into a state variable.

employee.js


export default class Employee extends Component{

if(this.props.employeeKey){
 constructor(props){
  super(props);

  this.state = {
   Name: this.props.name,
   Phone: this.props.phone,
   SecondaryPhone: this.props.secondaryPhone,
   AvailTimes: JSON.parse(this.props.availTimes),
   times: this.props.times,
   TimeFrom: "",
   TimeTo: ""
   }else{

   this.state = {
   Name: "",
   Phone: "",
   SecondaryPhone: "",
   AvailTimes: "",
   times: [],
   TimeFrom: "",
   TimeTo: "",
   }
  }
 }


 onChange(value, e){
  switch(value){
   case "Phone": this.setState(Phone: e.target.value)
    break;
   case "Name": this.setState(Name: e.target.value)
    break;
   case "SecondaryPhone": this.setState(SecondaryPhone: e.target.value)
    break;
   case "FromTime": this.setState(TimeFrom: e.target.value)
    break;
   case "ToTime": this.setState(TimeTo: e.target.value)
    break;
   }



  render(){

   var divToRender = (

    <label>
     From:
    <select onChange={this.onChange.bind(this, 'FromTime')}>{this.state.times.map(time => {return (<option value={time}> {time} </option>)})}</select>
    </label>

    <label>
     To:
    <select onChange={this.onChange.bind(this, 'ToTime')}>{this.state.times.map(time => {return (<option value={time}> {time} </option>)})}</select>
    </label>
   );

   return divToRender
 }
}

I was thinking of calling the onChange() method before my state to load these values in upon loading the page, but my guess is that it probably won't work.

https://stackoverflow.com/questions/21733847/react-jsx-selecting-selected-on-selected-select-option — epascarello, Aug 09 '19 at 14:03
@BARNOWL just started this job not too long ago and this is the code that I'm given. I didn't write the classes, and I'm working with what I got atm. — Michael, Aug 09 '19 at 15:25
ok i see. Sorry about that, i know how that feels. Hoping you find a solution to this. — BARNOWL, Aug 09 '19 at 15:27
@BARNOWL I have a current solution in the answers but I don't think it's the best way to go about it. If you know of a better solution please let me know. — Michael, Aug 09 '19 at 15:35

score 0 · Answer 1 · answered Aug 09 '19 at 14:42

Found this solution that works, but not sure if it's the best route to take:


<select onChange={this.onChange.bind(this, 'FromTime')}>{this.state.times.map(time => {return (<option value={time} selected={this.state.TimeFrom == time}> {time} </option>)})}</select>

How do I change a drop down selection to its saved value upon rendering the page?

1 Answers1