Table rows wrapped in an enclosing tag

Question

I have a table like this :

return (
            <tr key={key.dataKey}>
                <td>
                    <SuggestBox delay={1000} method={'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/>
                </td>
                <td>
                    <Quantity refValue={key.quantity} />
                </td>
                <td>
                    <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b>
                </td>
                <td>
                    <button className="btn" onClick={this.removeItem.bind(this, i)}> X </button>
                </td>
            </tr>
        )

But When I tried to put another TR in this render function, react gives me wrapping error. But I can't wrap them in a simple div. How to bypass this error ?

What I want is something like that :

return (
            <tr key={key.dataKey}>
                <td>
                    <SuggestBox delay={1000} method={'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/>
                </td>
                <td>
                    <Quantity refValue={key.quantity} />
                </td>
                <td>
                    <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b>
                </td>
                <td>
                    <button className="btn" onClick={this.removeItem.bind(this, i)}> X </button>
                </td>
            </tr>

           //Putting this gives me an error..
            <tr>
              <td colspan="4">Some message</td>
            </tr>
        )

Answer 1

Since React 16 you can use Fragments. This example uses the short syntax:

return (
    <>
        <tr key={key.dataKey}>
          <td>
            <SuggestBox delay={1000} method={ 'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/>
          </td>
          <td>
            <Quantity refValue={key.quantity} />
          </td>
          <td>
            <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b>
          </td>
          <td>
            <button className="btn" onClick={this.removeItem.bind(this, i)}>X</button>
          </td>
        </tr>

        //Putting this gives me an error..
        <tr>
          <td colspan="4">Some message</td>
        </tr>
    </>
)

Old Answer:

Wrap them in a <tbody> because you can have multiple tbody tags in a table. According to MDN:

Note that unlike <thead>, <tfoot> and <caption> elements, multiple <tbody> elements are permitted (if consecutive), allowing the data-rows in long tables to be divided into different sections, each separately formatted as needed.

return (
    <tbody>
        <tr key={key.dataKey}>
          <td>
            <SuggestBox delay={1000} method={ 'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/>
          </td>
          <td>
            <Quantity refValue={key.quantity} />
          </td>
          <td>
            <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b>
          </td>
          <td>
            <button className="btn" onClick={this.removeItem.bind(this, i)}>X</button>
          </td>
        </tr>

        //Putting this gives me an error..
        <tr>
          <td colspan="4">Some message</td>
        </tr>
    </tbody>
)