There are two problems with your code

  1. Only td and th are allowed inside tr
  2. In React version < 15, you have to wrap tags in one element, when you try to render them. In React 16, you can now do the following :

      <td key={1}>{}&nbsp;</td>,
      <td key={2}>{}&nbsp;</td>

    instead of wrapping the tds inside a div

I also suggest you extract your logic outside of the tr


If you need to return several elements and can't have a wrapper (such as in this case), you have a new option as of React 16.2. Fragments:


Or, you might be able to simplify it as:


The fragments won't resolve to any HTML element, so the <td>s will be direct children of your <tr>.

Related Query

More Query from same tag