How to make input field editable that has a value in reactjs?

Question

I'm new to Reactjs and I'm having difficulty in making the input field that has a assign value. Please guys help me.

My js file.

       <div className="col-sm-9">
        <input className={this.state.editable ? "edit-profile" : "disable-profile disable"}
        ref="fullName"
        onChange={this._handleInputChange.bind(null, "fullName")}
                        value={user.fullName}/>

My button

<button className="btn btn-default" onClick={this.edit}>
    {this.state.editDone ? "Done" : "Edit Profile"}</button>

edit = () => {
    if (!this.state.editDone) {
        this.setState({ editable: true, editDone: true});
    } else {
        this.setState({ editable: false, editDone: false});
    }
}

css file

.edit-profile {
outline: 0;
color: #000000;
border-width: 0 0 1px 0;
border-color: #A9A9A9;
width: 30%;
background-color: transparent;
padding-left: 20px;
font-size: 12px;
margin-bottom: 20px;}

what I'm suppose to do ?

Answer 1

If you are handling the value with a ref , then use defaultValue instead of value .

defaultValue prop on input allows for your uncontrolled component to have the initial value set.

value requires you to set the value on every render.

So simply change to this:

<input className={this.state.editable ? "edit-profile" : "disable-profile disable"}
        ref="fullName"
        onChange={this._handleInputChange.bind(null, "fullName")}
        defaultValue={user.fullName}/>