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

Remove misleading example in Forms #2875

Merged
merged 3 commits into from
Apr 1, 2020
Merged

Remove misleading example in Forms #2875

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9270eea
Remove misleading example in Forms
gaearon Apr 1, 2020
3091233
Update forms.md
gaearon Apr 1, 2020
f38a027
Update forms.md
gaearon Apr 1, 2020
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
8 changes: 1 addition & 7 deletions content/docs/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,7 @@ class NameForm extends React.Component {

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.

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:

```javascript{2}
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}
```
With a controlled component, the input's value is always driven by the React state. While this means you have to type a bit more code, you can now pass the value to other UI elements too, or reset it from other event handlers.

## The textarea Tag {#the-textarea-tag}

Expand Down