ReactJs “Invariant violation…” Classic react issue

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x