-
Notifications
You must be signed in to change notification settings - Fork 46k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changing defaultValue doesn't re-render input, causes hidden state in the db #4101
Comments
The answer you got on Stack Overflow is correct. We don't update when |
But hold on, in that case I'm going to argue that this is a bug as you can end up with a scenario where the current HTML is not stateless. The specific situation where I ran into this - a grid, and when double clicking on a row I popped open a dialog form to edit the row items. I noticed that my input values were stuck to the first value I opened even though everything else changed. How can this be correct behaviour? The whole point is that state is not stored in the DOM... If changing |
Also the docs need to be updated then, as they imply that |
With defaultValue, the state is stored in the DOM. That's why we don't recommend it. We recommend using controlled components instead. The docs say:
Let me know if that's still confusing. |
I posted this on the SO but I'll include it here as well. I found what seems to be a pretty good solution to this: Use the In my particular case, I don't need the import React, { PropTypes } from 'react';
import { Form } from 'provide-page';
const GatherContact = ({
classes,
onSubmit,
movingContactName,
movingContactEmail,
movingContactPhone,
userName,
userEmail,
userPhone
}) => (
<Form onSubmit={onSubmit}>
<div className={classes.GatherContact}>
<h2 className={classes.GatherHeading}>
How can we contact you?
</h2>
<input
type="text"
className={classes.GatherContactInput}
placeholder="Name"
name="movingContactName"
key={`movingContactName:${movingContactName || userName}`}
defaultValue={movingContactName || userName}
required={true}
/>
<input
type="email"
className={classes.GatherContactInput}
placeholder="Email"
name="movingContactEmail"
key={`movingContactEmail:${movingContactEmail || userEmail}`}
defaultValue={movingContactEmail || userEmail}
required={true}
/>
<input
type="tel"
className={classes.GatherContactInput}
placeholder="Phone"
name="movingContactPhone"
key={`movingContactPhone:${movingContactPhone || userPhone}`}
defaultValue={movingContactPhone || userPhone}
required={true}
/>
{userName
? undefined
: (
<input
type="password"
className={classes.GatherContactInput}
placeholder="Password"
name="userPassword"
required={true}
autoComplete="new-password"
/>
)
}
</div>
</Form>
);
GatherContact.propTypes = {
classes: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
movingContactName: PropTypes.string.isRequired,
movingContactEmail: PropTypes.string.isRequired,
movingContactPhone: PropTypes.string.isRequired,
userName: PropTypes.string.isRequired,
userEmail: PropTypes.string.isRequired,
userPhone: PropTypes.string.isRequired
};
export default GatherContact; |
My solution is to add a wrapper component, which uses local state when the user is editing the value, and only triggers the Here's an example, for the npm "rc-slider" component:
|
It is still confusing. |
I cannot say that this is good solution, as it disables some features of select, for example. In case with multiple select if you use this WA, and you need select many items, you will have to click as many times as many element you have to choose. Annoying but still can work. This is good WA but not the solution. |
Default props wouldn't update (facebook/react#4101 (comment)) when changed during development which causes unexpected behaviours. Eg, you have a fontSize with a defaul value on a Design System block and change it, before this, you won't notice the change until the component is mounted again. It also seems that there’s a proposal to deprecate defaultProps in React reactjs/rfcs#107 facebook/react#16210 https://www.xspdf.com/resolution/59631680.html.
I posted this on StackOverflow but the dearth of answers makes me think it might be a bug.
Given the following simple code
clicking the button doesn't re-render the input and it still says "Fred" even though
this.props.name
is "Wilma".Demo
The text was updated successfully, but these errors were encountered: