{"id":1914,"date":"2020-07-10T19:27:01","date_gmt":"2020-07-10T23:27:01","guid":{"rendered":"http:\/\/shirishranjit.com\/blog1\/?page_id=1914"},"modified":"2020-07-10T19:57:10","modified_gmt":"2020-07-10T23:57:10","slug":"reactjs-component-from-controlled-to-uncontrolled-explained","status":"publish","type":"page","link":"https:\/\/shirishranjit.com\/blog1\/reactjs\/reactjs-component-from-controlled-to-uncontrolled-explained","title":{"rendered":"ReactJS component from controlled to uncontrolled explained"},"content":{"rendered":"\n

If you don’t set\u00a0initial state<\/strong>\u00a0react will treat that as an\u00a0uncontrolled component<\/strong><\/p>\n\n\n\n

There are a few things to note here. If you open your comment, you’ll notice two warning messages pop up immediately:<\/p>\n\n\n\n

Warning: value<\/code> prop on input<\/code> should not be null. Consider using the empty string to clear the component or undefined<\/code> for uncontrolled components.<\/p>

Warning: FormPresenter contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.<\/p><\/blockquote>\n\n\n\n

Putting the jsx here for reference:<\/p>\n\n\n\n

  <input \n    type=\"text\" \n     value={this.state.value} \n     defaultValue={this.state.defaultValue}\n     onChange={this.handleChange}\n  \/><\/code><\/pre>\n\n\n\n
The first warning is telling you there’s something wrong with what you’re passing as a value, and is why it gives you the error you’re asking about (more on this in a minute).<\/p>\n\n\n\n
The second warning is telling you that controlled components should only use value<\/code> and uncontrolled components should only use defaultValue<\/code>. The reason here is if you need to set a default value for a controlled component, you can just default the value you pass to value<\/code>. And if you’re using an uncontrolled component you only care about setting a default value as you want the browser to manage the current value normally.<\/p>\n\n\n\n
So, now when you type in the input, it gives you that third warning:<\/p>\n\n\n\n
Warning: FormPresenter is changing an uncontrolled input of type text 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<\/p><\/blockquote>\n\n\n\n
This is linked to the first warning. Because you’re defaulting this.state.value<\/code> to null<\/code>, the input<\/code> is not considered controlled. If you change the default to an empty string (''<\/code>), you’re properly controlling the input and will not get the warning message.<\/p>\n
\n\t\t\t\t\tTweet<\/a>\n\t\t\t\t<\/div>
\n\t\t\t\t\t\tFollow me<\/a>\n\t\t\t\t\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"
If you don’t set\u00a0initial state\u00a0react will treat that as an\u00a0uncontrolled component There are a few things to note here. If you open your comment, you’ll notice two warning messages pop up immediately: Warning: value prop on input should not be null. Consider using the … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"parent":1918,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1914","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/1914"}],"collection":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/comments?post=1914"}],"version-history":[{"count":2,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/1914\/revisions"}],"predecessor-version":[{"id":1921,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/1914\/revisions\/1921"}],"up":[{"embeddable":true,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/1918"}],"wp:attachment":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/media?parent=1914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}