javascript - hitting save button adds extra one more empty field -

i have rules component number of rules can added , added rules shown either along additional add feature rules. there no problem while adding, removing rule field when posting data server, data gets posted 1 more empty field generated in client side. don't know how , why happening.

here code

const _id = 0;  function guid() {   function s4() {     return math.floor((1 + math.random()) * 0x10000).tostring(16).substring(1);   }   return s4() + s4(); }  const removebykey = (obj, deletekey) =>   object.keys(obj).filter(key => key !== deletekey).reduce((result, current) => {     result[current] = obj[current];     return result;   }, {});  class rules extends react.purecomponent {   constructor(props, context) {     super(props, context);      this.state = {       rules: { ruleandregulations: {} },     };   }    componentdidmount() {     this.props.loadrules();   }    componentwillreceiveprops(nextprops) {     if (nextprops.rules.size && nextprops.rules !== this.props.rules) {       nextprops.rules         .entryseq()         .map(([key, value]) => {           console.log('key', key, value);           this.setstate(             state => ({               rules: {                 ...state.rules,                 ruleandregulations: {                   ...state.rules.ruleandregulations,                   [value.get('_id')]: { _id: value.get('_id'), value: value.get('value') }                 }               }             })           );         })         .toarray();     }   }    handleaddrules = e => {     this.setstate({       rules: {         ...this.state.rules,         ruleandregulations: {           ...this.state.rules.ruleandregulations,           [guid()]: {             _id: guid(),             value: ''           }         }       }     });   };    handleremoverules = (e, num) => {     this.setstate({       rules: {         ...this.state.rules,         ruleandregulations: removebykey(this.state.rules.ruleandregulations, num)       }     });   };    handlechange = e => {     this.setstate({       rules: {         ...this.state.rules,         ruleandregulations: {           ...this.state.rules.ruleandregulations,           [e.target.name]: {             _id: e.target.name,             value: e.target.value           }         }       }     });   };    handlesave = e => {     e.preventdefault();     const ruleobj = { rule_regulations: [] };     const { ruleandregulations } = this.state.rules;     object.keys(ruleandregulations).map(val =>       ruleobj.rule_regulations.push(ruleandregulations[val].value)     );     this.props.postrules(ruleobj);   };    render() {     const { rules } = this.state;     console.log('state', this.state);     return (       <div classname="basic-property">         add rules , regulations         <span classname="circleinputui" onclick={this.handleaddrules}>           +         </span>         {rules &&           rules.ruleandregulations &&           <rulesinputcontainer             handlechange={this.handlechange}             handleremoverules={this.handleremoverules}             handlesave={this.handlesave}             value={rules.ruleandregulations}           />}       </div>     );   } }  export default connect(mapstatetoprops, mapdispatchtoprops)(rules); 

reducer posting

  case post_rules_success:       return state         .merge({           loading: false,           error: null,           response: action.response.message         })         .update('rules', rules => rules.push(fromjs(action.response.data))); 

for code in more detail

https://gist.github.com/milanrgm/7f744ee27df7e5d17410ffcba99fb89c

after posting following data in componentwillreceiveprops

when using concat

a) when first rule added

b) when second rule added

it looks pushing list list, instead of concating it. in reducer, try

.update('rules', rules => rules.concat(fromjs(action.response.data)));