Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Document that value={undefined} is not controlled component #9849

Closed
wants to merge 2 commits into from
Closed

Document that value={undefined} is not controlled component #9849

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d54417
Document `value={undefined}` is not controlled
Aprillion Jun 5, 2017
25bc047
Clarify when an element is considered controlled
Aprillion Jul 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions docs/docs/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,11 @@ class NameForm extends React.Component {

[Try it on CodePen.](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)

Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
When the `value` attribute is set on our input element, the displayed value will always be `this.state.value`, making the React state the source of truth. Similarly to not setting the `value` attribute at all, setting it to `null` or `undefined` will make React assume the component is not controlled and may produce a warning. We should use an empty string to represent an empty value.

With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
With a controlled component, every state mutation must have an associated handler function. Unlike the HTML5 onchange event, the `onChange` attribute in React runs the handler function on every keystroke, so the display value will update as the user types. We have to use the `setState` function, because `this.state` can be directly assigned only in the component's constructor.

This pattern makes it straightforward to modify or validate user input. For example, if we wanted to enforce all uppercase letters, we could write `handleChange` as:

```javascript{2}
handleChange(event) {
Expand Down