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.
Source: stackoverflow.com
Related Query
- Input value not showing in the react textbox
- React rendering problem in input box after fetching data in useEffect(). the state changed but textbox value not changing
- onChange the textbox value is not updating in HTML form using React
- React setState updates value but not showing up in the UI
- The value attribute is not displaying anything in the input type="checkbox" in React Typescript
- in react when I remove a dynamic input, the input does not show the right value on the browser
- Input element's value in react component is not getting re-rendered when the state changes
- Why is the value of a React controlled input element not being updated properly from a Chrome extension?
- The value of textbox does not update in React
- Why is the value of my variable not showing in the render for my react component?
- React test: after update input the props value still not change
- Not able to change value of input field after setting the initial value manually in react
- Value is not updating on the input entry in JS in React app
- Dependant Select Components not showing the Selected Value in Input Field
- Simple React form is not showing the default value (reactHooks)
- The input textbox is not letting me insert a value
- Can not get the value from Input React (react-rails gem)
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- React + Redux - Input onChange is very slow when typing in when the input have a value from the state
- Updating a React Input text field with the value on onBlur event
- DefaultValues of react-hook-form is not setting the values to the Input fields in React JS
- Send cursor to the end of input value in React
- React warns about passed prop with value null, where the PropType for the prop is not required
- Trigger change events when the value of an input changed programmatically React
- React - setting input value with JavaScript does not trigger 'onChange'
- Recharts XAxis is not showing the date value from tickFormatter
- React Native: Android is not showing all images (even though they are the same)
- The validation errors are not showing using React Hook Form
- Cypress: is there a way to assert if the value of an input is not empty or at least with some number of chars
More Query from same tag
- post request to node server not hitting endpoint
- How to stay on same page and render different component in react js
- React: Expected `onClick` listener to be a function, instead got a value of `object` type but only when I pass it to a child component
- Is it possible to pass setValue in react to child componenet as a function
- React checkbox control
- Traversing Through List of Objects in React/Jsx
- create-react-app + docker = QA and PROD Deploy
- How to wrap into act(...) second/deferred/async rendering
- Updating array value inside array of objects
- What are context and updater arguments in the React library?
- What is the best way to structure api config file in react project?
- redux-logger not showing action names suddenly only "object, object"
- Why do I need a server with create-react-app
- django.contrib.auth.decorators login_required with django-rest-framework
- material ui change the checkbox color
- Open Drawer component from Toolbar component in React
- Make only one row selectable at a time in React Table 7.1.0
- How can I import .obj file in reactjs using typescript?
- How to useFetch with a for loop?
- Sending API data in Gatsby to be used in Chart.js
- How to correctly use react-router
- How do I replace separator of breadcrumb in react-bootstrap using css?
- Local storage not storing the last added or deleted item to/from state in React app
- React Higher order component Vs Parent component
- How do i make Tailwind.css responsive?
- How test routing with links in Next JS?
- RazorPay Integration with React JS and Java application
- <NavigationBar/> in App.js gives this Error :Elemement type is invalid
- Passing undefined component as child using React
- Pokedex project api react js