CODEWITHSUNDEEP
javascriptreactjs
Dexter
Dexter

Reputation: 528

unable to do inline edit using react js as getting Warning: Failed prop type

Here I am trying to display a data in to the table and along with that, I am doing an update, append, edit and delete operations. All the functionalities are working fine except the edit, whenever I click on the edit I am getting this error:

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`

I tried setting a default value option but the problem is that after clicking on the edit and updating the value it is taking the old value. If you click on edit and edit 55 to 56 then click on save, 55 remains not updated to 56.

<tbody>
  {this.state.employeeResponse.map((response, index) => {
    return (
      <tr key={index}>
        <td >{index + 1}</td>
        <td >{response.id}</td>
        <td >{response.employee_name}</td>
        <td > {index !== this.state.isEditable ? <span>{response.employee_salary}</span> : <input type="text" ref={this.empSalary} value={response.employee_salary} id="empSalary" />}</td>
        <td > {index !== this.state.isEditable ? <span>{response.employee_deportment}</span> : <input type="text" ref={this.empDeportment} value={response.employee_deportment} id="empDeportment" />}</td>
        <td>
          {
            index !== this.state.isEditable ? <button className="button-group action-button edit-button-group" onClick={() => this.editEmployee(index)} >Edit</button> : <button className="button-group action-button save-button-group" onClick={() => this.saveEmployeeDetails(index)} >Save</button>
          }
          {
            index !== this.state.isEditable ? <button className="button-group action-button delete-button" onClick={() => this.deleteEmployee(response.id)} >Delete</button> : <button className="button-group action-button cancel-button-group" onClick={this.cancelEmployeeDetails}>Cancel</button>
          }
        </td>
      </tr>
    )
  })}
</tbody>

stackblitz --> https://stackblitz.com/edit/react-5aye7d

To view the data click on load button and then click edit to see error

Upvotes: 0

Views: 241

Answers (2)

Shivam Muttoo
Shivam Muttoo

Reputation: 89

You need to set State again to change the text inside Input box. Can try below code. 

<td > {index !== this.state.isEditable?<span>{response.employee_deportment}</span>: 
<input type="text" ref={this.empDeportment} value={response.employee_deportment}  
id="empDeportment" 
onChange={(event)=>{
                              let data = this.state.employeeResponse;
                              data[index].employee_deportment = event.target.value
                              this.setState({employeeResponse: data})
}}/>}
</td>

Upvotes: 0

Swapnil
Swapnil

Reputation: 215

You need to add onChange property to input tab.

If you specify value without onChange the input will work as a read only field.

<input type="text" ref={this.empSalary}  value={response.employee_salary} onChange={(e) => {/* update data*/}} id="empSalary" />

Upvotes: 1

Related Questions