Meteor(REACT) -- Unable to update input text value

Question

Unable to change/update value of input which is coming from database. Tried to understand https://facebook.github.io/react/docs/forms.html but not getting it.

Basically code is about showing roles collection data in table format and update facility is in modal input field.

This is my UMRolesList.jsx

export default class UMRolesList extends TrackerReact(Component) {
    rolesListData(){
       return Meteor.roles.find({}).fetch();
    }

    constructor(){
    super();
    this.state = {
        subscription : {
                       "rolesData" : Meteor.subscribe('rolefunction'),
                       }
                 }
    }

    render(){

       return(

            <section className="Content">
                <div className="row reportWrapper">
                    <div className="col-md-10 col-lg-12 col-sm-12 col-xs-12 noLRPad">
                        <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 noLRPad">
                        <h1 className="reportTitleName">LIST OF ROLES</h1>
                        <hr/>               
                            <UMaddRoles/>


                            <table className="table-responsive table table-striped table-hover myTable dataTable no-footer">
                                <thead className="table-head umtblhdr">
                                    <tr className="hrTableHeader">
                                        <th className="umHeader"> Role </th>
                                        <th className="umHeader"> Action </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    { this.rolesListData().map( (rolesData)=>{
                                        return <UMadd_role key={rolesData._id} roleDataVales={rolesData}/>
                                      }) 
                                    }                       
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </section>

    );

}

}

This is my UMadd_role.jsx

export default class UMadd_role extends TrackerReact(Component) {

    handleChange(event){
      console.log("changing the text area to: " + event.target.value)
      this.setState({value: event.target.value});
    }

     handleSubmit(event) {
      alert('A name was submitted: ' + this.state.value);
      event.preventDefault();
    }


   constructor(props) {
     super(props);
    this.state = {
      roleName: props.roleDataVales.name,
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
   }

    render(){

     return(
            <tr>
                <td> {this.props.roleDataVales.name}</td>           
                <td> 
                    <button className="editrole fa fa-pencil-square-o" data-toggle="modal" data-target={`#edit-${this.props.roleDataVales._id}`} ></button>


                    <div id={`edit-${this.props.roleDataVales._id}`} className="modal fade" role="dialog">
                      <div className="modal-dialog">


                        <div className="modal-content reportWrapper">
                          <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal">&times;</button>
                            <h4 className="modal-title">Edit Role</h4>
                          </div>
                          <div className="modal-body col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <form className="editroles">
                                    <div className="form-group col-lg-5 col-md-4 col-xs-12 col-sm-12 paddingLeftz">
                                        <label>Role Name*</label>
                                        <input type="text" ref="roleName" className="form-control rolesField" name={`${this.props.roleDataVales._id}-Namerole`} value=value={`${this.state.roleName}`} onChange={this.handleChange.bind(this)} required/>
                                    </div>
                                    <div className="form-group col-lg-1 col-md-4 col-xs-12 col-sm-12 ">
                                        <label>&nbsp;</label>
                                        <button type="button" onClick={this.editRole.bind(this)} id={this.props.roleDataVales._id} className="btn btn-primary submit" data-dismiss="modal">Edit Role</button>
                                    </div>
                                </form>
                          </div>
                          <div className="modal-footer">
                            <button type="button" className="btn btn-primary" data-dismiss="modal">Close</button>
                          </div>
                        </div>

                      </div>
                    </div>
                </td>       
            </tr>
    );

}
}

Thanks in advance!

Answer 1

Handle change event to change your value and setting it as a current state

handleChange(event){
  this.setState({value: event.target.value});
}

In constructor, store your value which may be coming from database which is props.roleDataVales.name and save it in state which is (defined in constructor) {this.state.roleName}.

constructor(props) {
 super(props);
 this.state = {
  roleName: props.roleDataVales.name,
 };
 this.handleChange = this.handleChange.bind(this);
}

And finally use defaultValue instead of value attribute and bind onChange event to input. Provide {this.state.roleName} to defaultValue which is coming from constructor.

<input type="text" ref="roleName" defaultValue={`${this.state.roleName}`} onChange={this.handleChange.bind(this)}/>

Answer 2

The reason for that maybe because you have assigned this.props.roleDataVales.name and there is no onChange for the the input field.

Try storing the the value this.props.roleDataVales.name in the state in the constructor and have an onChange on input field to update the value.