javascript - react - Have an element return two adjacent <tr> tags -

i building table each row followed "expander" row. default these rows hidden. clicking on row should toggle visibility of next row.

the design makes sense me think of these pairs of rows single "cell", , encapsulate toggling logic in cell element:

class cell extends react.component {   # logic here    render() {     return <tr><td>visibile</td></tr>            <tr><td>invisibile</td></tr>   } } 

this not allowed , causes react complain. can around putting 2 tr nodes in div. not ugly, makes react complain more , remove them:

 danger.js:107 danger: discarding unexpected node: <div  > 

eventually, mess, event handlers don't work error:

invariant.js:39 uncaught error: invariant violation:  findcomponentroot(..., .0.1.$0.0.0.$/=11.0.0.1.$0): unable find element.  means dom unexpectedly mutated (e.g., browser), due forgetting <tbody> when using tables, nesting tags  <form>, <p>, or <a>, or using non-svg elements in <svg> parent.  try inspecting child nodes of element react id ''. 

how should design cell component, don't have "danger" statements, , can still encapsulate logic in single component?

this seems major issue in react: https://github.com/facebook/react/issues/2127

at point, easiest option react-package. allows create <frag> tags, removed when component rendered:

class cell extends react.component {   # logic here    render() {     return (         <frag>            <tr><td>visibile</td></tr>            <tr><td>invisibile</td></tr>         </frag>   } } 

alternatively, @pawel pointed out, use multiple <tbody> elements.