How to set state value in each in each input field via get method

Question

I have an React form with 10 input field.I have a below code to set state for each field and finally I have submit this state to database.(insert record in table using post method via state).I would like to know how to set value in each in each input field via get method.

initial State :-

this.state = {
      UserId : this.props.match.params.id,
      FirstName: '',
      LastName : '',
      EmailId : '',
      MobileNo : '',
      DivisionId :'',
      UserName : '',
      Password : '',
      ConfirmPassword : '',
      RoleId : '',
      UpdateUserName : localStorage.getItem("UserId"),
      GridState : []

    };

Setting State Value in each input Field before submitting :-

onChangeHandler = (event) => {
  let nam = event.target.name;
  let val = event.target.value;
  this.setState({[nam]: val});
}

Submit Record to Database via Post Method :-

onSubmitHandler = (event) => {
 axios.post(ConfigItem[0].APIPath+'Users/',this.state)
  .then(res => {
  this.props.history.push('/UserList')

  })  
}

Get inserted record from API via get method :-

axios.get(ConfigItem[0].APIPath+'users/' + this.props.match.params.id)
  .then(res => {
    console.log(res.data.data); ***// I would like to know how to set value in each input field***

HTML render :-

render() {
return (
      <form onSubmit={this.onSubmitHandler}>
      <div className="animated fadeIn">
        <Row>
          <Col xs="12" sm="12">
            <Card>
              <CardHeader>
                  <Row>                 
                    <Col xs="8" sm="8">
                      <strong> <i> User Creation Entry </i> </strong>
                    </Col>
                    <Col xs="4" sm="4">
                       <Button type="button"   text="Back" size="sm" onClick={this.onBackButtonClick} color="danger" className="pull-right  ml-1 "><i className="fa fa-ban"></i> Back</Button>
                       <Button type="submit" size="sm" color="success"  className="pull-right  ml-1 "><i className="fa fa-dot-circle-o"></i> Save</Button>
                    </Col>
                  </Row>

              </CardHeader>

              <CardBody>





                <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="LastName" className="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
                  <div className="col-sm-3">
                    <input type="email" name ="EmailId" className="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" required onChange={this.onChangeHandler}/>
                  </div>

                </div>

                <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">Mobile No</label>
                  <div className="col-sm-3">
                    <input type="text" name ="MobileNo" className="form-control form-control-sm" id="TxtMobileNo" placeholder="Mobile No" onChange={this.onChangeHandler} />
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Division</label>
                  <div className="col-sm-3">
                     <select name ="DivisionId" className="form-control" required onChange={this.onChangeHandler}>
                        {DivisionList}
                      </select>   
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">User Name</label>
                  <div className="col-sm-3">
                    <input type="text" name ="UserName" className="form-control form-control-sm" id="TxtUserName" placeholder="User Name" required onChange={this.onChangeHandler}/>
                  </div>

                  </div>

                  <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">Password</label>
                  <div className="col-sm-3">
                    <input type="password" name ="Password" className="form-control form-control-sm" id="TxtPassword" placeholder="Password" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Confirm</label>
                  <div className="col-sm-3">
                    <input type="password" name="ConfirmPassword" className="form-control form-control-sm" id="TxtConfirm" placeholder="Confirm Password" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Role</label>
                  <div className="col-sm-3">
                  <select name ="RoleId"  data-show-subtext="true" data-live-search="true" className="form-control selectpicker" id="CboRole" required onChange={this.onChangeHandler}>
                        {RoleList}
                      </select>   
                  </div>



                </div>







              </CardBody>
              <CardFooter>
              <div id="data-grid-demo">
        <DataGrid
          dataSource={this.state.GridState}
          ref={ref => this.dataGrid = ref}
          keyExpr="MenuId"
          showBorders={true}
          onToolbarPreparing={this.onToolbarPreparing}
          onRowUpdated={this.onRowUpdated}
        >
          <Paging enabled={false} />
          <Editing
            mode="batch"
            allowUpdating={true}
            selectTextOnEditStart={true}
            startEditAction='click' />
          <Column dataField="UserAccessId" visible={false} />
          <Column dataField="MenuId" visible={false}  />
          <Column dataField="Menu"  />
          <Column dataField="SubMenu"  />
          <Column dataField="ViewAccess" caption="ViewAccess" dataType="boolean"  >
            <CheckBox defaultValue={false} />
          </Column>
          <Column dataField="ZohoParameter"  />
          <Column dataField="Remarks"  />

        </DataGrid>


      </div>
              </CardFooter>
            </Card>
            </Col>
           </Row>
          </div>
          </form>
    );
}

Answer 1

the second statement is not working,please check my below result of json data and advise how to do this..

[{"UserId":2009,"FirstName":"jj","LastName":"kk","EmailId":"kk.biz@itytu.com","MobileNo":"9789684772","DivisionId":4,"UserName":"khizer11","Password":"$2b$10$JRG/Zp5TQOJkZPIj2bXFset3gx8DF/OFnrGzZqR4rnC7Bc/a9.yyO","DPassword":"ii@123","RoleId":8,"LoginTag":null,"LoginTime":null,"LogOutTime":null,"SysName":"DELLNETBOOK","UpdateUserName":"","UpdateSysName":null,"UpdateDateTime":null,"DefaultDateTime":

Answer 2

Set the value to each <input /> that is equal to the class state, for example:

<input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" value={this.state.FirstName} placeholder="First Name" required onChange={this.onChangeHandler}/>

After that, simply save your data from the axios call into the state:

this.setState({
  FirstName: result.data.FirstName,
  //Add the others by yourself
})

If your query result properties have the same name as the ones in your state, you could simply do:

this.setState({
   ...result.data.data //depending on your result object structure
})