ReactJs "Invariant violation..." Classic react issue

Question

This is a typical react issue but I kinda don't know how to handle it. I just want to render my table lines dynamically but I get the error:" "Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 2 of 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 ,

, or , or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID .2.1.0."

I understand react is not finding the right DOM stuff but how to handle that ? Thanks in advance !

<div className="panel-body" style={panelstyle}>
              <Table striped bordered condensed hover>
                <thread>
                  <th> Currency </th>
                  <th> Amount </th>
                  <th> Issuer </th>
                  <th> Limit </th>
                  <th> Limit Peer </th>
                  <th> No-Ripple </th>
                </thread>
                <tbody>
                  {this.state.ripplelines[this.address] ?

                              this.state.ripplelines[this.address].lines.map(function(line,i) {

                            return      (<tr>
                                          <td> USD </td>
                                          <td> 1500 </td>
                                          <td> raazdazdizrjazirazrkaẑrkazrâkrp </td>
                                          <td> 1000000000 </td>
                                          <td> 0 </td>
                                          <td> True </td>
                                        </tr>)       
                            ;
                        })             
                  : ""}
                </tbody>
              </Table>
            </div>

Could you provide us with the full code of the component? Protip (unrelated): you can use `{condition && element}` instead of `{condition ? element : ''}` as React doesn't render the value `false`. See [False in JSX](http://facebook.github.io/react/tips/false-in-jsx.html). — Alexandre Kirszenberg, Mar 18 '15 at 13:46
this is the full component, add return( before and ) at the end of this code. Thanks for the condition tip but this is not helping my problem (could use this tip anyway thanks) — François Richard, Mar 18 '15 at 13:50
Also, a few errors I've noticed: `` should be `` (same for the closing tag), your `` elements should be inside a `` element, and you should pass a unique key to each of your table rows (`` will do if you don't plan on reordering them). — Alexandre Kirszenberg, Mar 18 '15 at 13:50
thanks that's useful bot not really helping this specific problem — François Richard, Mar 18 '15 at 14:00
Could you provide us with the source/repo of the `Table` component? — Alexandre Kirszenberg, Mar 18 '15 at 14:03
@FrançoisRichard hello, did you find any solution to this problem? thanks, Cheers! — meligatt, Nov 18 '15 at 03:58
Does this answer your question? [Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object](https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string) — A Jar of Clay, Apr 01 '21 at 18:14

score 5 · Accepted Answer · edited May 23 '17 at 12:09

There is an answer here: React js: Invariant Violation: processUpdates() when rendering a table with a different number of child rows

Just prepare your rows before rendering!

render:
 var rows = [];
      if(this.state.ripplelines[this.address] ) {
        _.each(this.state.ripplelines[this.address].lines, function(line) {
           rows.push(                   <tr>
                                          <td> somestuff!</td>

                                        </tr>)
        }); 
      }
return (
    <Table striped bordered condensed hover>
                    <thead>
                      <th> Currency </th>
                      <th> Amount </th>
                      <th> Issuer </th>
                      <th> Limit </th>
                      <th> Limit Peer </th>
                      <th> No-Ripple </th>
                    </thead>     
                    <tbody>
                      {rows}    
                    </tbody>
              </Table>
)

yes so your component are unique and you avoid the error. You could use .map also it would work — François Richard, Nov 18 '15 at 04:57

score 0 · Answer 2 · edited Jan 21 '16 at 19:53

0

For anyone using Immutable with React.js:

I was getting the same error even with proper <thead> and <tbody>. Turns out I was using Immutable.List() to store my <tr> elements. Converting that to an array via .toArray() solved this error.

edited Jan 21 '16 at 19:53

Chewpers

2,430
5
23
30

answered Jan 21 '16 at 18:52

Praveen Ray

83
1
8

ReactJs "Invariant violation..." Classic react issue

2 Answers2

Linked