title: How to fix validateDOMNesting(...): <td> cannot appear as a child of <tbody>. and Each child in a list should have a unique "key" prop
body: <p>I am trying to fix these two warnings:</p>
  
  <pre><code>Warning: validateDOMNesting(...): &lt;td&gt; cannot appear as a child of &lt;tbody&gt;.
  
  Warning: Each child in a list should have a unique "key" prop.
  </code></pre>
  
  <p>Here is my table js file:</p>
  
  <pre><code>        &lt;table className="table table-hover"&gt;
  
    &lt;thead&gt;
  
      &lt;tr&gt;
        &lt;th scope="col"style={{width: "10%"}}&gt;ID&lt;/th&gt;
        &lt;th scope="col"style={{width: "10%"}}&gt;Name&lt;/th&gt;
        &lt;th scope="col"style={{width: "10%"}}&gt;Price $&lt;/th&gt;
        &lt;th scope="col" style={{width: "10%"}}&gt;Quantity&lt;/th&gt;
        &lt;th scope="col" style={{width: "10%"}}&gt;Total $:&lt;/th&gt;
        &lt;th scope="col" style={{width: "10%"}}&gt;Total €:&lt;/th&gt;
        &lt;th scope="col" style={{width: "20%"}}&gt;Remove:&lt;/th&gt;
        &lt;th scope="col" style={{width: "20%"}}&gt;Change Quantity:&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    {this.state.products.map(data=&gt;
     &lt;tbody&gt;
        &lt;td&gt;{data.id}&lt;/td&gt;
  
  
  
        &lt;td&gt;{data.name}&lt;/td&gt;
  
  
        &lt;td&gt;{data.price}&lt;/td&gt;
  
  
        &lt;td&gt;{data.quantity}&lt;/td&gt;
  
  
        &lt;td&gt;{data.quantity*data.price}&lt;/td&gt;
        &lt;td&gt;{Math.round(data.quantity*data.price*0.92)}&lt;/td&gt;
        &lt;td&gt;
        &lt;button type="button" onClick={(e)=&gt;this.handleSubmitRemove(data.id)} className="btn btn-danger"&gt;Remove&lt;/button&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
         &lt;button  style={{margin: "3px"}}  type="button" onClick={(e)=&gt; this.updateCart(data.id,1)}&gt;+&lt;/button&gt;
         &lt;button  style={{margin: "3px"}} disabled={data.quantity==1} type="button" onClick={(e)=&gt; this.updateCart(data.id,-1)}&gt;-&lt;/button&gt;
        &lt;/td&gt;
  
        &lt;/tbody&gt;
    )}
  
  &lt;/table&gt;
  </code></pre>
  
  <p>I tried to get <code>&lt;tbody&gt;</code> outside the <code>this.state.products.map(data=&gt;</code> but then I have another error </p>
  
  <pre><code>JSX expressions must have one parent element.
  </code></pre>
  
  <p>Any help or idea would be appreciated to solve this issue.</p>
  
  <p>Thank you so much!
  Have a nice day</p>