React re-render changes <input> `value` field first before `type` and re-rendering the node #6663

gurinderhans · 2016-04-30T04:17:25Z

The following code generates two <button>'s and an <input> field whose type changes respective to the type of button clicked (or dependent on the component state).

So, if my rendered field is type number and it has the value 42 and I tap the <button> to change the field type to text with new value hello world!, react tries to set <input type='number' />'s value to 'hello world!' before changing field type to text, which generates a warning in the console as show below:

The value definitely set's once the type changes, which is after the value, however the warning is generated.

The code is below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Re-Render Warning Example</title>
    <link rel="stylesheet" href="../shared/css/base.css" />
  </head>
  <body>
    <h1>React Re-Render Warning Example</h1>
    <div id="container">
      Loading...
    </div>
    <script src="../../build/react.js"></script>
    <script src="../../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script type="text/babel">
      var InnerApp = React.createClass({
        getInitialState: function() {
          return {
            type: '',
            val: ''
          }
        },

        componentWillMount: function() {
          this.setState({
            type: this.props.type,
            val: this.props.val
          });
        },

        componentWillReceiveProps: function(nextProps) {
          this.setState({
            type: nextProps.type,
            val: nextProps.val
          });
        },

        onChange: function(event) {
          this.setState({
            val: event.target.value
          })
        },

        render: function() {
          var renderInput;
          if (this.state.type === 'text') {
            renderInput = (<input type='text' value={this.state.val} onChange={this.onChange} />);
          } else {
            renderInput = (<input type='number' value={this.state.val} onChange={this.onChange} />);
          }

          return (
            <div>
              {renderInput}
            </div>
          );
        }
      });

      var App = React.createClass({
        getInitialState: function() {
          return {
            type: 'text',
            val: ''
          }
        },

        changeType: function(itype) {
          this.setState({
            type: itype,
            val: itype === 'text' ? 'randomstring' : 32
          });
        },

        render: function() {
          return (
            <div>
              <button onClick={this.changeType.bind(null, 'text')}>Text</button>
              <button onClick={this.changeType.bind(null, 'number')}>Number</button>
              <InnerApp val={this.state.val} type={this.state.type} />
            </div>
          );
        }
      });

      ReactDOM.render(<App />, document.getElementById('container'));
    </script>
  </body>
</html>

The text was updated successfully, but these errors were encountered:

jimfb · 2016-04-30T14:42:08Z

Duplicate of #6441

gurinderhans changed the title ~~React re-render changed value field first before re-rendering the node~~ React re-render changes <input> value field first before type and re-rendering the node Apr 30, 2016

jimfb closed this as completed Apr 30, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React re-render changes <input> `value` field first before `type` and re-rendering the node #6663

React re-render changes <input> `value` field first before `type` and re-rendering the node #6663

gurinderhans commented Apr 30, 2016 •

edited

Loading

jimfb commented Apr 30, 2016

React re-render changes <input> value field first before type and re-rendering the node #6663

React re-render changes <input> value field first before type and re-rendering the node #6663

Comments

gurinderhans commented Apr 30, 2016 • edited Loading

jimfb commented Apr 30, 2016

React re-render changes <input> `value` field first before `type` and re-rendering the node #6663

React re-render changes <input> `value` field first before `type` and re-rendering the node #6663

gurinderhans commented Apr 30, 2016 •

edited

Loading