How do I fix a component is changing from controlled input of the type text to be uncontrolled. Reactjs Error

Question

I have set the initial state to blanks than why am I encountering this error ? What should I change next ? I am fetching users from the database using ID and then trying to update their value. I get this error for the first attempt only. subsequent attempts works perfectly. could there be problem with the backend ?

import React, { Component } from 'react';
import axios from 'axios';
export default class EditUsers extends Component {
    constructor(props)
    {  
        super(props);

        this.onchangeUsername = this.onchangeUsername.bind(this);
        this.onchangeAddress = this.onchangeAddress.bind(this);
        this.onchangePhoneno = this.onchangePhoneno.bind(this);
        this.onSubmit = this.onSubmit.bind(this);


        this.state = {
            username:'',
            address:'',
            phoneno:''
        }
    }

    componentDidMount() {

        axios.get('http://localhost:5000/users/'+this.props.match.params.id)
        .then(response=>{
            this.setState({
                username:response.data.username,
                address:response.data.address,
                phoneno:response.data.phoneno,
            })

        })
        .catch(function (error) {
            console.log(error);

        })


    }

    onchangeUsername(e)
    {
        this.setState({
                username:e.target.value
        });
    }

    onchangeAddress(e)
    {
        this.setState({
                address:e.target.value
        });
    }

    onchangePhoneno(e)
    {
        this.setState({
                phoneno:e.target.value
        });
    }
    onSubmit(e){
        e.preventDefault();

        const user =
        {
            username:this.state.username,
            address:this.state.address,
            phoneno:this.state.phoneno

        }
        console.log(user);

        axios.post('http://localhost:5000/users/update/'+this.props.match.params.id,user)
        .then(res=>console.log(res.data));

        this.setState({
            username:this.props.username,
            address:this.props.address,
            phoneno:this.props.phoneno 
        })

    }
    render() 
    {
        return (
            <div>
              <h3>Edit User List</h3>
              <form onSubmit={this.onSubmit}>
                  <div className="form-group">
                      <label>Username: </label>
                      <input type="text" required
                      className="form-control"
                      value={this.state.username}
                      onChange={this.onchangeUsername}
                      />
                  </div>
                  <div className="form-group">
                      <label>Address: </label>
                      <input type="text" required
                      className="form-control"
                      value={this.state.address}
                      onChange={this.onchangeAddress}
                      />
                  </div>
                  <div className="form-group">
                      <label>Phoneno: </label>
                      <input type="text" required
                      className="form-control"
                      value={this.state.phoneno}
                      onChange={this.onchangePhoneno}
                      />
                  </div>
                  <div className="form-group">
                <input type="submit" value="Update" className="btn btn-primary" />
                  </div>
              </form>
            </div>
        );
    }
}

that means one of the value (response from api call in didMount) `data.username`, `data.address`, `data.phoneno` is not proper either null or undefined. **one way** to solve the problem is, use `value={this.state.username || ''}`, similarly with other fields also. — Mayank Shukla, Jan 13 '20 at 06:35
for more details, check [this answer](https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro/47012342#47012342). — Mayank Shukla, Jan 13 '20 at 06:42

jbergeron · Answer 1 · 2020-01-13T06:43:11.680

0

Prevent your input value to be null.

If you pass from null to not null, you will recieve this error.

A quick fix could be to do this:

        <input
          type="text"
          required
          className="form-control"
          value={this.state.username || ''}
          onChange={this.onchangeUsername}
        />

edited Jan 13 '20 at 06:43

answered Jan 13 '20 at 06:35

jbergeron

515
3
8

I initialised the state to blank spaces would that not work ? if not where should I change ? – Glorious15 Jan 13 '20 at 06:37
Yes, you're right. But maybe your receive a null value from your api call or either when you set your state with this.props.username. – jbergeron Jan 13 '20 at 06:38

How do I fix a component is changing from controlled input of the type text to be uncontrolled. Reactjs Error

1 Answers1