score:-1

change value by defaultvalue

<forminput handlechange={this.handlechange} name="email" type="email" label="email" defaultvalue={email} required/>

score:0

in state you have displayname and confirmpassword, change forminput names to match.

<forminput handlechange={this.handlechange} name="displayname" type="text" label="display name" value={displayname} required/>

<forminput handlechange={[see the following images][1]this.handlechange} name="confirmpassword" type="password" label="confirm password" value={confirmpassword} />

score:0

see working codesandbox: https://codesandbox.io/s/charming-golick-43k27

for your state to update dynamically and coordinate with your handlechange method, you should provide names to your inputs that match directly with a key in the state object. hence, displayname is not the same as display-name and confirm-password does not equal confirmpassword.

      <forminput
        handlechange={this.handlechange}
        name="displayname"
        type="text"
        label="display name"
        value={displayname}
        required
      />
      <forminput
        name="confirmpassword"
        type="password"
        label="confirm password"
        value={confirmpassword}
        handlechange={this.handlechange}
      />

just take a look at the handlechange function you defined:

  handlechange = event => {
    const { name, value } = event.target;
    this.setstate({ [name]: value });
  };

this essentially says, take the name property from the element that is creating this event, and use that name to find the matching key in our component state. once found, update the key with the value from this element.

score:0

there are 'displayname' and 'confirmpassword' properties in the local state, but the name attribute of forminput displayname is 'display-name', same for 'confirm-password'.

so the event.target.name are 'display-name' and 'confirm-password' in handlechange method.

either change name attribute to match state properties or vice-versa.

i would recommend you to watch state altering in react devtools where you would see the new state properties ('display-name' and 'confirm-password') when you typed, so you would guess it.


Related Query

More Query from same tag