Porting libraries from Preact to React

I just want to ask a question

Im a Preact user, never tryed React, I only did a course a couple of months ago. But now I have to use React for a project and I'm trying to port one of my libraries: https://github.com/k1r0s/preact-bind-group

This library aims for easy form setup

<FormGroup watch={change => this.setState({ ...change })}>
      <div className="field">
         <label className="label">Email</label>
         <div className="control">
            <input data-bind="mail" className="input"/>
         </div>
      </div>
     <div className="field">
        <label className="label">ContraseƱa</label>
        <div className="control">
         <input data-bind="pass" type="password" className="input"/>
        </div>
     </div>
     <div>
       <a onClick={_ => this.doLogin(this.state)} className="button is-primary">Submit</a>
    </div>
</FormGroup>

My code works perfecly on Preact but Im facing issues on React, for example input is loosing focus everytime I time on the form rather than update field value.

This is the React example: https://codesandbox.io/s/9jv6n8mnrp

This is the Preact which is working: https://codesandbox.io/s/wmpv1o4z8

This library keeps an internal state to manage field values and events.. what Im doing wrong? help appreciated

1 answer

  • answered 2018-03-14 10:04 k1r0s

    Removing keys example worked :\

    But warnings keep appearing