I have a big plicated <table> with lots of bindings to another javascript framework (knockout). I'm trying to convert a portion of it into React.

<table>
    <tbody id="lots_of_legacy_knockout"> ... </tbody>
    <tbody id="I_want_this_in_React"></tbody>
</table>

However, this tries to put a <tbody> root element inside the <tbody> container:

const Tbody = () => (
    <tbody>
        <tr />
        <tr />
        <tr />
    </tbody>
);
ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);

And this results in an error because React wants a unique root element:

const Tbody = () => ([
    <tr />,
    <tr />,
    <tr />,
]);

ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);

How can I acplish this without rewriting the entire root <table> element in React?

Is there a way to bine the react root and the react container?

I have a big plicated <table> with lots of bindings to another javascript framework (knockout). I'm trying to convert a portion of it into React.

<table>
    <tbody id="lots_of_legacy_knockout"> ... </tbody>
    <tbody id="I_want_this_in_React"></tbody>
</table>

However, this tries to put a <tbody> root element inside the <tbody> container:

const Tbody = () => (
    <tbody>
        <tr />
        <tr />
        <tr />
    </tbody>
);
ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);

And this results in an error because React wants a unique root element:

const Tbody = () => ([
    <tr />,
    <tr />,
    <tr />,
]);

ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);

How can I acplish this without rewriting the entire root <table> element in React?

Is there a way to bine the react root and the react container?

• javascript
• reactjs
• knockout.js

2 Answers 2

You can now use React.Fragment:

const Tbody = () => (
    <React.Fragment>
        <tr />
        <tr />
        <tr />
    </React.Fragment>
);

ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);

This will result in:

// Invalid HTML
<tbody id="I_want_this_in_React">
  <tbody>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</tbody>

which is not valid HTML.

Since React requires rendered ponents to have exactly zero siblings, I don't think there is a way to do this with React.

For example, you would need to wrap the <Tr /> ponents with some HTML element, which also wouldn't be valid HTML.

// Invalid HTML
<tbody>
  <span>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </span>
</tbody>

Is there a way you can instead separate out the <tbody> intended for React into it's own <table>?

If so, you can do something like this:

HTML:

<table id="lots_of_legacy_knockout">
    <tbody>...</tbody>
</table>

<table id="I_want_this_in_React"></table>

React:

const Tbody = () => (
    <tbody>
        <tr />
        <tr />
        <tr />
    </tbody>
);
ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);

Or, nest the <table>:

HTML:

<table id="lots_of_legacy_knockout">
    <tbody>...</tbody>
    <table id="I_want_this_in_React"></table>
</table>

React:

const Tbody = () => (
    <tbody>
        <tr />
        <tr />
        <tr />
    </tbody>
);
ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);