React cannot appear as a child of Warning

Question

I am getting the following warnings in a React component:

The related code is the following:

import React, { PropTypes } from \'react\';
imp         


        

Answer 1

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

Answer 2

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>.