I am getting the following warnings in a React component:

The related code is the following:

import React, { PropTypes } from 'react';
import { Checkbox } from 'react-bootstrap'; 

const MyComponent = (params) => {

function onSelect(event) {
    params.onSelect(event, params.data.id);
}

return (
    <tr key={params.data.id}>
        {params.isSelectable ? (
            <Checkbox onChange={onSelect}>
                <td>{params.data.firstName}&nbsp;</td>
                <td>{params.data.lastName}&nbsp;</td>
            </Checkbox>
        ) : (
            <div>
                <td>{params.data.firstName}&nbsp;</td>
                <td>{params.data.lastName}&nbsp;</td>
            </div>
        )}
    </tr>
);

};

If I remove the div tags, I get the following error:

Adjacent JSX elements must be wrapped in an enclosing tag

I am new to React, so i am not quite clear on what is going on here. What's the problem and how can I fix it?

Update: my React version is 15.3.2.

I am getting the following warnings in a React component:

The related code is the following:

import React, { PropTypes } from 'react';
import { Checkbox } from 'react-bootstrap'; 

const MyComponent = (params) => {

function onSelect(event) {
    params.onSelect(event, params.data.id);
}

return (
    <tr key={params.data.id}>
        {params.isSelectable ? (
            <Checkbox onChange={onSelect}>
                <td>{params.data.firstName}&nbsp;</td>
                <td>{params.data.lastName}&nbsp;</td>
            </Checkbox>
        ) : (
            <div>
                <td>{params.data.firstName}&nbsp;</td>
                <td>{params.data.lastName}&nbsp;</td>
            </div>
        )}
    </tr>
);

};

If I remove the div tags, I get the following error:

Adjacent JSX elements must be wrapped in an enclosing tag

I am new to React, so i am not quite clear on what is going on here. What's the problem and how can I fix it?

Update: my React version is 15.3.2.

• javascript
• html
• reactjs

• 3 Divs as children of table rows is invalid HTML. Only table headers or table cells can be children of rows. – j08691 Commented Dec 20, 2017 at 17:18
• <td> belong inside <tr> only. The clue is in the question. Also <div> should be within a <td> or <th> if required to be within table contents – pokeybit Commented Dec 20, 2017 at 17:19
• Show your Checkbox component...Try to replicate your problem here – Dhaval Jardosh Commented Dec 20, 2017 at 17:30
• @DhavalJardosh my Checkbox component is from the 'react-bootstrap' library. I didn't create it. – lukegf Commented Dec 20, 2017 at 19:30
• This is what you are talking about, right? – Dhaval Jardosh Commented Dec 20, 2017 at 19:38

2 Answers 2

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

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