A component is changing an uncontrolled input of type email to be controlled. Input elements should not switch from uncontrolled to controlled

1
votes

I am getting this error, I am new in react. I have seen other posts but still could not resolve the issue. help will be appreciated. thanks

Warning: A component is changing an uncontrolled input of type email to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info in input (created by Edit) in div (created by Edit) in div (created by Edit) in form (created by Edit) in div (created by Edit) in Edit

import React from 'react'
import ReactDom from 'react-dom'

export default class Edit extends React.Component{
    constructor(){
        super();
        this.state={
            name: '',
            email: '',
            password: '',
        };

    }

componentWillMount(){
    let id=this.props.id;
    axios.get('/api/users/'+id).then(response => {
        var user= response.data;

        this.setState({
            name: user.name,
            email: user.email,
        })
    }).catch(error => {
        console.log(error)
    })
}

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

handleEmailChange(e){
    this.setState({
        email: e.target.value
    })
}

handlePasswordChange(e){
    this.setState({
        password: e.target.value
    })
}

handleSubmit(e){
    e.preventDefault();
    console.log(this.state)

    axios.post('/api/users',this.state).then(response => {
        console.log(response)
    }).then(error => {
        console.log(error)
    })
}

    render(){
        return(
            <div> 
            <h2> Add New User </h2>


            <form className="form-horizontal" onSubmit={this.handleSubmit.bind(this)}>
                 <div className="form-group">
                    <label className="control-label col-sm-2" htmlFor="email">Name:</label>
                    <div className="col-sm-10">
                      <input type="text" className="form-control" id="name" placeholder="Enter name" value={this.state.name}
                       onChange={ this.handleNameChange.bind(this) }/>
                    </div>
                  </div>

                  <div className="form-group">
                    <label className="control-label col-sm-2" htmlFor="email">Email:</label>
                    <div className="col-sm-10">
                      <input type="email" className="form-control" id="email" placeholder="Enter email" value={this.state.email}
                       onChange={ this.handleEmailChange.bind(this) }/>
                    </div>
                  </div>

                   <div className="form-group">
                    <label className="control-label col-sm-2" htmlFor="email">Password:</label>
                    <div className="col-sm-10">
                      <input type="password" className="form-control" id="password" placeholder="Enter password" value={this.state.password}
                        onChange={ this.handlePasswordChange.bind(this) }/>
                    </div>
                  </div>

                <div className="form-group">
                    <button type="submit" className="btn btn-default">Update</button>   
                </div>


        </form>

        </div>
            )
        }
}

if (document.getElementById('edit')) {
    var id=$("#edit").data("id");
ReactDom.render(<Edit id={id}/>, document.getElementById('edit'))
}
2
javascriptreactjs
By any chance, is the value of e.target.value undefined or null ? - Chirag Swadia
actually I am doing crud and this is the update form.. in componentWillMount() function, response.data is giving the json response of {name,email }. but when i try to set it using user.name it gives the error. do you have any idea about that ? - Khurram Shahzad

2 Answers

2
votes

The error is occuring because when you're doing setState inside componentDidMount, the value returned seems to be undefined. 

if(user.name!==undefined && user.email!==undefined){
    this.setState({
        name: user.name,
        email: undefined,
    })
}

This will prevent the values in the state from becoming undefined and you won't have that error anymore.

2
votes

You are using value attribute to set default value while rendering, it makes your input controlled input, then when updating your states you are trying to change your input values again which will make it uncontrolled one. basically for your code to succeed you need to use defaultValue attribute in your rendered code instead of value attr. because when you are setting value to input from html it can't be later changed.

do this instead for your input elements: 

<input type="email" className="form-control" id="email" placeholder="Enter email" defaultValue={this.state.email} />

here is a source from react docs on issue:

https://reactjs.org/docs/uncontrolled-components.html