score:4

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}>{params.data.firstName}&nbsp;</td>,
      <td key={2}>{params.data.lastName}&nbsp;</td>
    ]
    

    instead of wrapping the tds inside a div

I also suggest you extract your logic outside of the tr

score:4

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:

<React.Fragment>
  <td>{params.data.firstName}&nbsp;</td>
  <td>{params.data.lastName}&nbsp;</td>
</React.Fragment>

Or, you might be able to simplify it as:

<>
  <td>{params.data.firstName}&nbsp;</td>
  <td>{params.data.lastName}&nbsp;</td>
</>

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