ReactJS - Warning: A component is changing an uncontrolled input of type text to be controlled - edit function

Question

Hi I'm newbie of react and now I'm starting to learn the basic full-stack concept.

I want to make when User clicked the 'edit' button, the data's in the input text still remained in the text box before user click edit.

but I faced this error

Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

how can I solve this problem?

thank you in advance!

import React, { Component } from "react";
import axios from "axios";

class Edit extends Component {
    constructor(props){
        super (props);
        this.onChangeName = this.onChangeName.bind(this);
        this.onChangePosition = this.onChangePosition.bind(this);
        this.onChangePhone = this.onChangePhone.bind(this);
        this.onChangePasscode = this.onChangePasscode.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            name:"",
            position: "",
            phone:"",
            passcode: ""
        }
    }
    componentDidMount() {
        axios.get('http://localhost:8888/reactJsCRUD/getById.php?id='+this.props.match.params.id)
         .then(response => {
            this.setState({
                name:response.data.employeeName,
                postition:response.data.employeePosition,
                phone: response.data.employeePhone,
                passcode:response.data.passcode
            });
         })
         .catch(function(error) {
             console.log(error);
         })
    }

    onChangeName(e) {
        this.setState({
            name: e.target.value
        });
    }

    onChangePosition(e) {
        this.setState({
            position: e.target.value
        });
    }

    onChangePhone(e) {
        this.setState({
            phone:e.target.value
        });
    }

    onChangePasscode(e) {
        this.setState({
            passcode: e.target.value
        });
    }
    onSubmit(e) {
        
    } 



    render() {
        return (
          <div style={{ marginTop: 10 }} className="w-50 p-3">
            <h3> Add New Employee</h3>
            <form onSubmit={this.onSubmit}>
              <div className="form-group-3">
                <label>Name: </label>
                <input type="text" className="form-control"  value={this.state.name} onChange={this.onChangeName} />
              </div>
              <div className="form-group">
                <label htmlFor= "positionFormSelect">Position: </label>
                <select className="form-control" id="positionFormSelect" value={this.state.position} onChange={this.onChangePosition}>
                  <option>Select the position</option>
                  <option value= "manager">Manager</option>
                  <option value= "server">Server</option>
                  <option value= "cook">Cook</option>
                </select>
              </div>
              <div className="form-group">
                <label>Phone: </label>
                <input type="text" className="form-control" value={this.state.phone} onChange = {this.onChangePhone}/>
              </div>
              <div className="form-group">
                <label>Passcode: </label>
                <input type="text" className="form-control" value= {this.state.passcode}onChange = {this.onChangePasscode}/>
              </div>
              <div className="form-group">
                <input
                  type="submit"
                  value="Edit Employee"
                  className="btn btn-primary"
                />
              </div>
            </form>
          </div>
        );
      }
}
 
export default Edit;

Answer 1

I think you have a typo here:

 <input type="text" className="form-control" value={this.state.posscode} onChange={this.onChangePasscode}/>

value should be this.state.passcode

Answer 2

In your code you are setting the state in componentDidMount and that is why it is showing you a warning.

Because you are using that state for controlled component and if that state get updated from outside of event handler then it will always shows warning as a alert that your state that seems to be used for controlled component, now getting updated outside the scope of controlled component. So advice is that if you want to use state for controlled component, then make sure that specific state do not gets updated from anywhere else.

That's why it is giving you a warning of uncontrolled component because your state is not controlled now as it is getting updated outside of controlled component scope.

Answer 3

Hey guys I got the solution. The problem was in the PHP file!

<?php
require_once "cors.php";
require_once "connect.php";

cors();
$con = connect();

$id = $_GET['id'];

// Get by id
$sql = "SELECT * FROM employee WHERE employeeId = {$id} LIMIT 1";

$result = mysqli_query($con,$sql);
$row = mysqli_fetch_assoc($result);
print_r($row) 
echo $json = json_encode($row);

exit;

because of print_r($row), the got data also had array and that's why I could not access response.data properly in React :) thank you all !