Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with react v15 - uncontrollable/controllable components

See original GitHub issue

When rendering a custom component, the component gets rendered without a value. When you start typing, it gets a value, thus changing to a controllable input. I think the source of the problem is with the getValue() function. Which might need to be changed to:

getValue: function () { return this.state._value || ""; }

Not sure if this alone will fix it though. Haven’t had this issue in v0.17.

This is the error message I receive: _warning.js:44 Warning: TextField is changing a uncontrolled input of type email to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info:

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:13
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

zimt28commented, Apr 26, 2016

Same issue, value={props.getValue() || ''} fixes this for now.

JosephClaycommented, Aug 23, 2016

@uzarubin The HOC will attach the methods to props, the mixin to this.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Uncontrolled Components - React
In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by...
Read more >
Controlled vs. uncontrolled components in React
“Uncontrolled” refers to the fact that these components are not controlled by React state. The values of the form elements are traditionally  ......
Read more >
How do I clear an uncontrolled textarea in react.js?
If value is set in your JSX, the component will be controlled even if you assign it an empty string. To give a...
Read more >
Simulate React On-Change On Controlled Components
According to React Docs, this is intentional. An example below will give us more clarity with the problem. class NameForm extends React.Component {...
Read more >
Controlled vs Uncontrolled Components in React - ITNEXT
React.createRef() is used to create instance variables within uncontrolled component constructors. These variables are then associated with input elements via ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found