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

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'))
}