0

I have a form in which I have a few textboxes and dropdowns. I am re-rendering this form component on change of dropdown value with new values. It is re-rendering fine with update values but I am not able to change the values manually from textboxes or dropdown. How can I update the value manually after prepopulating values?

render() {
   return <div>
    <div className="row">
  <div className="form-group col-md-4">
<label>Name:<i><b>*</b></i></label>

<select className="form-control formControl" onChange={this.props.simplifiedFunction} id="ddlName" defaultValue={this.props.data[0].EmployeeID} >
{this.props.allNames}
</select>
</div> <div className="form-group col-md-4">
<label>Title:</label>
  <input className="form-control formControl" defaultValue={this.props.data[0].Title}
  value={this.props.data[0].Title} />
</div>
    <div className="form-group col-md-4">
    <label>Department:</label>
    <input className="form-control formControl" defaultValue={this.props.data[0].Department} 
     value={this.props.data[0].Department} />
</div>
</div>
Sandeep Arora
  • 5
  • 1
  • 1
  • 3

2 Answers2

0

For update value in input when you set value you have to set onChange.

First put your specific props in state.

Example state:

state = { myname:'Bayat'}

Example input:

<input  value={this.state.myname} onChange={e=>this.setState({myname:e.target.value})}/>
Peyman
  • 101
  • 1
  • 6
  • Hi Peyman, I am using setState to trigger a render function. It calling and my component is binding the updated data into input textboxes and dropdown as well but it is not allowing me to update the textbox value manually. – Sandeep Arora Apr 25 '19 at 09:06
  • I eddited the answer ;) – Peyman Apr 25 '19 at 09:38
0

If you are using setState({}) you probably want to be binding the input value to the state and not props?

Something like this - 

<input className="form-control formControl" defaultValue={this.props.data[0].Department} 
     value={this.state.department} />
Sam
  • 1,736
  • 8
  • 15