title: validateDOMNesting(...): #text cannot appear as a child of <tr>
body: <p>I am creating a reusable component for table and I am facing the warning in console that is:-</p>
  
  <pre><code>validateDOMNesting(...): #text cannot appear as a child of &lt;tr&gt;. 
  </code></pre>
  
  <p>Here is the sample code :-</p>
  
  <p>This is render method in which we are checking the value of object if json then make the linkable row otherwise simple text.</p>
  
  <pre><code>return (
     &lt;div className="table-responsive" id={self.props.tableId}&gt;
         &lt;table id="table3"className="table table-bordered"&gt;
             &lt;tbody&gt;
                {
                   this.isJson(self.props.columns.labels[0]) ?
                       (this.props.records.map((record, index) =&gt; {
                           return self.makeLink( record, index)
                       })) : (this.props.records.map((record, index) =&gt; {
                           return ( &lt;tr key = { index } &gt; {
                               self.props.columns.labels.map((label, index) =&gt; {
                                   return ( &lt;td key = { index } &gt; { self.renderTableData(index, record) } &lt;/td&gt;)
                               })
                           } &lt;/tr&gt; )
                       }))
               }
  
             &lt;/tbody&gt;
         &lt;/table&gt;
     &lt;/div&gt;                          
     );
  </code></pre>
  
  <p>makeLink function :- </p>
  
  <pre><code>  makeLink(record, index){
      var self = this;
      return (
         &lt;tr key={index} onClick={this.redirect.bind(this,record._id)} &gt;
         {this.props.columns.labels.map((label, index) =&gt;{
             return (
                &lt;td key={index}&gt;{self.renderTableData(index,record)}&lt;/td&gt;
              )
         })}
     &lt;/tr&gt; 
   )
  }
  </code></pre>
  
  <p>Thanks in advance</p>