title: ReactJS - Adjacent JSX elements must be wrapped in an enclosing tag Error. When trying to include two <tr> tag
body: <p>Am working in the Reactjs application with mongoDB. Am getting data from MongoDB and displaying in the table. Due to the table row is too long. I want to split the table row into two lines. </p>
  
  <p>So, for this am trying to include two <code>&lt;tr&gt;</code> tags but it giving me the error <code>Adjacent JSX elements must be wrapped in an enclosing tag</code>.</p>
  
  <p>I have written 3 separate component class for this requirement. </p>
  
  <p>Please find my code below. ( Am using ReactJS 15.6.1 version )</p>
  
  <pre><code>class Details extends React.Component {
      constructor(props) {
      super(props);   
      this.state = { item: props.item };
      }
  
              render() {
  
              return (
              &lt;table className="table table-bordered" style={{fontsize: '8'}}&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Line Number&lt;/th&gt;
                          &lt;th&gt;Product Code&lt;/th&gt;
                          &lt;th&gt;Description&lt;/th&gt;
                          &lt;th&gt;Quantity&lt;/th&gt;
                          &lt;th&gt;Unit Price&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;DetailsList items={ this.state.item.order_items }  /&gt;
              &lt;/table&gt;
          );   
      }
  }
  
  class DetailsList extends React.Component {
      constructor(props) {
          super(props);
          this.state = { };
      }
   render() {
         return (&lt;tbody&gt;{ this.props.items.map((item) =&gt; &lt;DetailsItem key={ 
   item.line_id } item={ item } /&gt;) }
                    &lt;/tbody&gt;);    
          }
  }
  
  class DetailsItem extends React.Component {
      constructor(props) {
          super(props);
          this.state = { item: props.item };
      }
  
  
      render() {
          return (
              &lt;tr&gt;
                  &lt;td&gt;&lt;input name="line_number" type="text"  
                       value={ this.state.item.line_number }  /&gt; &lt;/td&gt;
                  &lt;td&gt;&lt;input name="product_code" type="text"
                       value={ this.state.item.product_code }  /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input name="product_description" type="text"
                       value={ this.state.item.product_description } /&gt; &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  Product Quantity &lt;td&gt;{ this.state.item.product_quantity } /&gt;
                                  &lt;/td&gt;
                  Unit Price &lt;td&gt;{ this.state.item.unit_net_price }  /&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
          );
      }
  }
  </code></pre>
  
  <p>For Example am trying to like below snippet.</p>
  
  <pre><code>return(
          &lt;tr&gt;
              &lt;td&gt;.....&lt;/td&gt;
              &lt;td&gt;.....&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;.....&lt;/td&gt;
              &lt;td&gt;.....&lt;/td&gt;
          &lt;/tr&gt;
       )
  </code></pre>
  
  <p>I already wrapped my <code>&lt;tbody&gt;</code> tag with <code>props</code> data in my previous component.</p>
  
  <pre><code> render() {
         return (&lt;tbody&gt;{ this.props.items.map((item) =&gt;
         &lt;DetailsItem key={ item.line_id } item={ item } /&gt;) }  &lt;/tbody&gt;);    
          }
   } 
  </code></pre>
  
  <p>If i use single <code>&lt;tr&gt;</code> tag instead of two, then its working fine. But i want to split this row into two.</p>
  
  <p><a href="https://i.stack.imgur.com/YyZd8.png" rel="nofollow noreferrer">Please find the screenshot after adding <code>&lt;div&gt;</code> tag</a></p>