validateDOMNesting(...):<tr> 不能作为孩子出现<div>

Question

I'm trying to get this work:

Orders:

render () {
  const orders = this.state.orders.map((order, index) => <OrderRow order={order} key={index}/>);

  return (
    <table>
      <tbody>
        {orders}
      </tbody>
    </table>
  );
}

OrderRow:

render () {
  return (
    <tr>
      <td>{this.props.order.number}</td>
      <td>{this.props.order.products}</td>
      <td>{this.props.order.shippingDate}</td>
      <td>{this.props.order.status}</td>
    </tr>
  );
}

But still getting this error:

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
See Orders > div > OrderRow > tr.

Any ideas how to fix it?

Answer 1

Wrap your OrderRow <tr> in <tbody> as explained in issue here , Browsers need the <tbody> tag. If it is not in your code, then the browser will automatically insert it. This will work fine on first render, but when the table gets updated, then the DOM tree is different from what React expects. This can give strange bugs, therefore React warns you to insert the <tbody> .

OrderRow

render () {
  return (
    <table>
      <tbody>
        <tr>
          <td>{this.props.order.number}</td>
          <td>{this.props.order.products}</td>
          <td>{this.props.order.shippingDate}</td>
          <td>{this.props.order.status}</td>
        </tr>
      </tbody>
    </table>
  );
}

Answer 2

Something like this:

 render() { return ( <table> <tbody> {this.state.orders.map((order, index) => { <tr index={index}> <td>{order.number}</td> <td>{order.products}</td> <td>{order.shippingDate}</td> <td>{order.status}</td> </tr> })} </tbody> </table> ); }

Answer 3

Or more elegant:

 render () { return ( <table> <tbody> {this.state.orders.map((order, index) => ( return (<OrderRow order={order} key={index} />); )} </tbody> </table> ); }

Answer 4

它将tr渲染为div ，因此请改用.map() :)

Answer 5

Could you try something more automatic?

render() {
  return (
    <table>
      <tbody>
        {this.state.orders.map((order, index) => {
          <tr index={index}>
            {Object.keys(order).map(function(key,id) {
              return (<td key={id}>{order[key]}</td>)
            })}
          </tr>
         }}
      </tbody>
    </table>
  );
}