validateDOMNesting(…): cannot appear as a child of

Question

I\'m trying to get this work:

Orders:

render () {
    const orders = this.state.orders.map((o         


        

Answer 1

Wrap your OrderRow in as explained in issue here, Browsers need the 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 .

OrderRow

render () {
    return (
       

        

         

            
{this.props.order.number}
            
{this.props.order.products}
            
{this.props.order.shippingDate}
            
{this.props.order.status}
         
        
       
    );
}