title: Editable Form ReactJS
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  let _ = require('lodash');
  
  import {bindActionCreators} from "redux";
  import {connect} from 'react-redux';
  
  import {fetchedBeaconsEdit} from '../../actions/';
  import {editBeacon} from '../../actions/index';
  
  // TODO - come up with a decent name
  
  class InfoRow extends Component {
  
      render() {
          return (
  
              &lt;tr&gt;
                  &lt;td&gt;
                { this.props.beacon === "name" 
                  || this.props.beacon === "major" 
                  || this.props.beacon === "minor" 
                  || this.props.beacon === "beaconType" ?
                    &lt;span&gt;{this.props.beacon}&lt;span className="font-css top"&gt;*&lt;/span&gt;&lt;/span&gt;:
                    &lt;span&gt;{this.props.beacon}&lt;/span&gt;
                }
  
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  { this.props.beacon !== "beaconType" &amp;&amp; 
                    this.props.beacon !== "uuid" &amp;&amp; 
                    this.props.beacon !== "status" &amp;&amp; 
                    this.props.beacon !== "store"&amp;&amp;
                    this.props.beacon !== "group" ?
                  &lt;div&gt;
                      &lt;input type="text"
                         className="form-control"
                         defaultValue={this.props.beaconValue}
                         name={this.props.beaconValue}
                         onChange={(e) =&gt;this.props.handleInputChangeProp(e.target.value)}
                      /&gt;&lt;/div&gt;:
  
                      this.props.beacon === "uuid" &amp;&amp; this.props.beacon === "status" &amp;&amp; this.props.beacon=== "store"?
                    &lt;span&gt;&lt;/span&gt;:
  
                      this.props.beacon === "beaconType"?
  
                      &lt;select defaultValue={this.props.beaconValue} name={this.props.beaconValue} className="form-control" onChange={(e) =&gt;this.props.handleInputChangeProp(e.target.value)}&gt;
                        
                        &lt;option name="ibeacon"&gt;IBEACON&lt;/option&gt;
                        &lt;option name="eddystone"&gt;EDDYSTONE&lt;/option&gt;
                      &lt;/select&gt;:this.props.beaconValue
  
                      
  
                  }
  
  
  
                  &lt;/td&gt;
              &lt;/tr&gt;
          )
      }
  }
  
  class BeaconEdit extends Component {
  
    constructor(props){
      super(props);
      this.state = {
              
          };
      this.handleInputChange = this.handleInputChange.bind(this);
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleInputChange(beacon, value) {
  
          this.setState({
              [beacon]: value
          });
      }
  
   handleClick = () =&gt;{
         Object.keys(this.props.ebcn).map((key)=&gt; {
          if (this.state[key] !== undefined) {
            this.props.editBeaconGroup[key]=this.state[key];
          }
              
         })
          this.props.handleSubmitProp(this.props.editBeaconGroup);
    }
   
      render() {
  
          const rows = [];
          let a = this.props.ebcn;
  
          
  
         Object.keys(this.props.ebcn).map((keyName, keyIndex) =&gt;{
  
            if (keyName === "store" || keyName === "group") {
              return rows.push(&lt;InfoRow beacon={keyName} beaconValue={a[keyName].name.toString()} name={this.state[keyName]} key={keyIndex} handleInputChangeProp={(inp) =&gt;this.handleInputChange(keyName, inp)}/&gt;);
            }else{
              return rows.push(&lt;InfoRow beacon={keyName} beaconValue={a[keyName].toString()} name={this.state[keyName]} key={keyIndex} handleInputChangeProp={(inp) =&gt;this.handleInputChange(keyName, inp)}/&gt;);
         }
         });
  
          return (
  
  
              &lt;div className="col-md-6"&gt;
                  &lt;div className=""&gt;
  
                    &lt;table className="table table-clear"&gt;
                      &lt;tbody&gt;
                
                      {rows}
                      
                      &lt;/tbody&gt;
                    &lt;/table&gt;
                   &lt;/div&gt;
                   &lt;div className="px-1" &gt;
                          &lt;button className="btn btn-sm btn-info btn-size btn-block" onClick={this.handleClick}&gt;Save&lt;/button&gt;
                   &lt;/div&gt;
            &lt;/div&gt;
  
          )
  
      }
  
  
  }
  
  class BeaconDetailEditComponent extends Component {
    
    constructor(props){
      super(props);
      this.state = {
          editbeacons: {}
          };
          this.handleSubmit = this.handleSubmit.bind(this);
  
          this.validateName = this.validateName.bind(this);
          this.validateMajor = this.validateMajor.bind(this);
          this.validateMinor = this.validateMinor.bind(this);
      }
  
      validateMinor = (minor) =&gt; {
        var re = /^[0-9]+$/;
        return re.test(minor);
      }
  
      validateMajor = (major) =&gt; {
        var re = /^[0-9]+$/;
        return re.test(major);
      }
  
      validateName = (name) =&gt; { 
        var re = /^[A-Za-z ]+$/;
        return re.test(name); 
      };
  
  
    handleSubmit (beaconedited) {
  
      console.log(beaconedited.name);
  
      if (!this.validateName(beaconedited.name)) { 
                alert('Name can not be an integer')  
            }
  
      else if (!this.validateMajor(beaconedited.major)) { 
                alert('Major number can only be an integer')  
            }
  
          else if (beaconedited.major.length &gt; 5) {
            alert('Major number can not exceed 5 digits')
          }
  
          else if (!this.validateMinor(beaconedited.minor)) { 
                alert('Minor number can only be an integer')  
            }
  
          else if (beaconedited.major &gt; 65535) {
            alert('Major number can not exceed the limit of 65535')
          }
  
          else if (beaconedited.minor &gt; 65535) {
            alert('Minor number can not exceed the limit of 65535')
          }
  
      else {
  
        this.props.editBeacon(beaconedited, this.props.location.query.id);
      
    }
      }
  
    componentWillMount = () =&gt; {
          this.props.fetchedBeaconsEdit(this.props.location.query.id);  
      };
  
    
    render() {
      
      return (
          &lt;div className="container px-3 mr-3"&gt;
              &lt;div&gt;
                &lt;div className="col-md-6 col-md-offset-3"&gt;&lt;h1&gt;Edit Beacon Information&lt;/h1&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;br/&gt;
              &lt;br/&gt;
                  { this.props.ebcn != null?
              &lt;div&gt;
                  &lt;BeaconEdit ebcn={this.props.ebcn} handleSubmitProp={this.handleSubmit} editBeaconGroup={this.state.editbeacons}/&gt;
              &lt;/div&gt; :
                      &lt;center&gt;&lt;img className="gif-size" src={'img/avatars/default.gif'} alt="Loading"/&gt;&lt;/center&gt;
  
              }
          &lt;/div&gt;
      )
    }
  }
  
  function mapStateToProps(state) {
      return {
          eBeacon: state.eBeacon,
          ebcn: state.beacons
      }
  
  }
  
  
  function matchDispatchToProps(dispatch){
      return bindActionCreators({editBeacon: editBeacon, fetchedBeaconsEdit: fetchedBeaconsEdit}, dispatch);
  }
  
  export default connect(mapStateToProps, matchDispatchToProps)(BeaconDetailEditComponent);</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/1IqIT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1IqIT.png" alt="This is the output I&#39;m getting right now"></a>
  </p>
  
  <p><a href="https://i.stack.imgur.com/gHEi3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gHEi3.png" alt="enter image description here"></a>
  </p>
  
  <p>i had provided the code snippet
  what i am doing is 
  i had fetched the values from the server and were shown in the fields and I'm making this page as editable form
  what i want to do is now to take the values changed or changed by the user and to print them in console.
  i had applied handleInputChange and its showing changed values while changing but i want to see those values in console on button click as well
  how to do it?</p>