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: https://fb.me/react-controlled-components_

Issue Analytics

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

Top GitHub Comments

15reactions

zimt28commented, Apr 26, 2016

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

4reactions

JosephClaycommented, Aug 23, 2016

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

Top 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...

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 ......

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...

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 {...

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 ...