<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const LogRow = React.createClass({
  mixins: [PureRenderMixin],
  render: function() {
    return (
      &lt;TableRow&gt;
&lt;TableRowColumn &gt;{this.props.dataVal.timestamp}&lt;/TableRowColumn&gt;
&lt;TableRowColumn &gt;{this.props.dataVal.logLevel}&lt;/TableRowColumn&gt;
&lt;TableRowColumn &gt;{this.props.dataVal.serviceType}&lt;/TableRowColumn&gt;
&lt;TableRowColumn&gt;{this.props.dataVal.logMessage}&lt;/TableRowColumn&gt;
&lt;TableRowColumn &gt;{this.props.dataVal.tailNumber}&lt;/TableRowColumn&gt;
&lt;TableRowColumn &gt;{this.props.dataVal.logFilename}&lt;/TableRowColumn&gt;
&lt;/TableRow&gt;
    );
  }
})"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">LogRow</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">mixins</span>: <span class="pl-kos">[</span><span class="pl-v">PureRenderMixin</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-en">render</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">TableRow</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">TableRowColumn</span> <span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">dataVal</span><span class="pl-kos">.</span><span class="pl-c1">timestamp</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableRowColumn</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">TableRowColumn</span> <span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">dataVal</span><span class="pl-kos">.</span><span class="pl-c1">logLevel</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableRowColumn</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">TableRowColumn</span> <span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">dataVal</span><span class="pl-kos">.</span><span class="pl-c1">serviceType</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableRowColumn</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">TableRowColumn</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">dataVal</span><span class="pl-kos">.</span><span class="pl-c1">logMessage</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableRowColumn</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">TableRowColumn</span> <span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">dataVal</span><span class="pl-kos">.</span><span class="pl-c1">tailNumber</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableRowColumn</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">TableRowColumn</span> <span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">dataVal</span><span class="pl-kos">.</span><span class="pl-c1">logFilename</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableRowColumn</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableRow</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">then I used it like this</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="let logData = filteredObjects.map((dataVal, i) =&gt; &lt;LogRow key={i} dataVal={dataVal} forId={'id'+i}/&gt;);"><pre class="notranslate"><code class="notranslate">let logData = filteredObjects.map((dataVal, i) =&gt; &lt;LogRow key={i} dataVal={dataVal} forId={'id'+i}/&gt;);
</code></pre></div>
<p dir="auto">When I change it to a simple code below, the checkboxes on my table are visible</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  let logData = filteredObjects.map((dataVal, i) =&gt; &lt;TableRow key={i}&gt;&lt;TableRowColumn &gt;{dataVal.timestamp}&lt;/TableRowColumn&gt;&lt;TableRowColumn &gt;{dataVal.logLevel}&lt;/TableRowColumn&gt;&lt;TableRowColumn &gt;{dataVal.serviceType}&lt;/TableRowColumn&gt;&lt;TableRowColumn&gt;{dataVal.logMessage}&lt;/TableRowColumn&gt;&lt;TableRowColumn &gt;{dataVal.tailNumber}&lt;/TableRowColumn&gt;&lt;TableRowColumn &gt;{dataVal.logFilename}&lt;/TableRowColumn&gt;&lt;/TableRow&gt;);"><pre class="notranslate"><code class="notranslate">  let logData = filteredObjects.map((dataVal, i) =&gt; &lt;TableRow key={i}&gt;&lt;TableRowColumn &gt;{dataVal.timestamp}&lt;/TableRowColumn&gt;&lt;TableRowColumn &gt;{dataVal.logLevel}&lt;/TableRowColumn&gt;&lt;TableRowColumn &gt;{dataVal.serviceType}&lt;/TableRowColumn&gt;&lt;TableRowColumn&gt;{dataVal.logMessage}&lt;/TableRowColumn&gt;&lt;TableRowColumn &gt;{dataVal.tailNumber}&lt;/TableRowColumn&gt;&lt;TableRowColumn &gt;{dataVal.logFilename}&lt;/TableRowColumn&gt;&lt;/TableRow&gt;);
</code></pre></div>
<p dir="auto">I'm not sure if it's a Material-UI or ReactJS issue though.</p>
<p dir="auto">I have created a component which generates Table and another one which generates TableRows. The problem is that the checkbox on the rows are not showing.</p>
<p dir="auto">Any ideas?</p>
<p dir="auto">Thanks</p>