title: How to fix error Uncaught Invariant Violation: findComponentRoot(...?
body: <p>I’ve created InitializePhoneNumbersPanel:</p>
  
  <pre><code>class InitializePhoneNumbersPanel extends Component {
    constructor(props) {
      super(props);
      this.onSubmit = this.onSubmit.bind(this);
    }
  
    onSubmit(phoneNumbers) {
      const { dispatch, operatorId } = this.props;
  
      dispatch(updateOperatorData(operatorId, phoneNumbers, {include: 'phone_numbers'}));
    }
  
    render() {
      const {
        handleSubmit,
        submitting,
        fields: { phone_numbers }
        } = this.props;
  
      console.log('\n... Render ...');
      console.log('phone_numbers &lt;&lt;&lt;&lt;&lt; ', phone_numbers);
  
      if (_.isEmpty(phone_numbers)) {
        return (
          &lt;div className={"fade in"}&gt;
            Hello
          &lt;/div&gt;
        )
      }
  
      return (
        &lt;form onSubmit={handleSubmit(this.onSubmit)}&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-md-12"&gt;
              &lt;ul className="list-unstyled m-b-0 clearfix"&gt;
                {phone_numbers &amp;&amp; phone_numbers.map((phone, index) =&gt;
                  &lt;PhoneNumbersPanelItem key={index} phone={phone} phone_numbers={phone_numbers}
                               index={index}/&gt;
                )}
              &lt;/ul&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-md-12"&gt;
              &lt;button type="button" className="btn btn-sm btn-success" onClick={event =&gt; {
                  event.preventDefault();
                  phone_numbers.addField();
                }}&gt;&lt;i className="fa fa-plus"&gt;&lt;/i&gt;
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr/&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-md-12"&gt;
              &lt;button type="submit" disabled={ submitting } className="btn btn-sm btn-success pull-right"&gt;
                Save
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      )
    }
  }
  </code></pre>
  
  <p>Then this component is wrapped by Redux-form:</p>
  
  <pre><code>InitializePhoneNumbersPanel = reduxForm({
    form: 'phone-numbers-panel',
    fields
  })(InitializePhoneNumbersPanel);
  </code></pre>
  
  <p>Then everything is wrapped by connect method to make data from Store accessible in Redux-form as fields:</p>
  
  <pre><code>function select(state) {
    return {
      initialValues: {
        phone_numbers: _.map(state.operators.items[state.operators.selectedOperator] &amp;&amp; state.operators.items[state.operators.selectedOperator].phone_numbers, phoneId =&gt; {
          return state.phoneNumbers.items[phoneId];
        })
      },
      operatorId: state.operators.selectedOperator
    };
  }
  
  InitializePhoneNumbersPanel = connect(select)(InitializePhoneNumbersPanel);
  </code></pre>
  
  <p><strong>The error is…</strong></p>
  
  <p>The code above works normally however in PhoneNumbersPanelItem component phone numbers which come from “phone_numbers” variable are repeated.</p>
  
  <p>When the operators page(whose phone numbers are shown using PhoneNumbersPanelItem) is loaded the first time  no errors occur, however if I choose other operator, Route will change which means operatorId param in store will change which means operators object will change and the phone numbers will be different… changed data are sent to component here:</p>
  
  <pre><code>function select(state) {
    return {
      initialValues: {
        phone_numbers: _.map(state.operators.items[state.operators.selectedOperator] &amp;&amp; state.operators.items[state.operators.selectedOperator].phone_numbers, phoneId =&gt; {
          return state.phoneNumbers.items[phoneId];
        })
      },
      operatorId: state.operators.selectedOperator
    };
  }Operator
    };
  }
  
  InitializePhoneNumbersPanel = connect(select)(InitializePhoneNumbersPanel);
  </code></pre>
  
  <p>So if the number of phone numbers of chosen operator is less than the previous one had , the error is thrown</p>
  
  <blockquote>
    <p>Uncaught Invariant Violation: findComponentRoot(...,
    .0.0.0.1.2.0.0.2.1.0.1.1.0.0.0.$1.0.0.0.0.1.1.0): Unable to find
    element. This probably means the DOM was unexpectedly mutated (e.g.,
    by the browser), usually due to forgetting a  when using
    tables, nesting tags like , <p>, or , or using non-SVG
    elements in an  parent. Try inspecting the child nodes of the
    element with React ID ``.</p>
  </blockquote>
  
  <p>As I understood, the error is thrown because at the beginning there were 3 phone numbers for example, and when I choose a new operator the number of phones is 2 and React seemingly fails to find html code for the third number as in the new rendering this element was not created</p>
  
  <p>Even though there is an error, everything works ok. Probably with another rendering react understands that the state has updated and rerenders virtual DOM</p>
  
  <p>If all operators have the same number of phone numbers, NO error occur AT ALL</p>
  
  <p>How can I fix this error? Has anybody encountered anything like that? So strange that React doesn’t understand that the virtual DOM has changed when we switch to a new Route. 
  I’ll appreciate any help/solution to this problem</p>