Eu tenho um componente chamado OrderItem que pega um objeto com vários objetos (pelo menos dois) dentro dele e os renderiza como várias linhas dentro de uma tabela. Haverá vários OrderItem com, componentes dentro da tabela. O problema é que, na função de renderização do componente, não consigo retornar várias linhas. Só posso retornar um único componente e, se envolvê-los em uma div, ele diz "<tr> não pode aparecer como filho de<div>"

O código se parece com isso (deixei algumas coisas de fora para facilitar a legibilidade)

Parent() {
  render() {
    return (
      <table>
        <tbody>
          {
            _.map(this.state.orderItems, (value, key) => {
              return <OrderItem value={value} myKey={key}/>
            })
          }
        </tbody>
      </table>
    )
  }
}

class OrderItem extends React.Component {
  render() {
    return (
      <div> // <-- problematic div
        <tr key={this.props.myKey}>
          <td> Table {this.props.value[0].table}</td>
          <td> Item </td>
          <td> Option </td>
        </tr>
        {this.props.value.map((item, index) => {
          if (index > 0) { // skip the first element since it's already used above
            return (
              <tr key={this.props.myKey + index.toString()}>
                <td><img src={item.image} alt={item.name} width="50"/> {item.name}</td>
                <td>{item.selectedOption}</td>
              </tr>
            )
          }
        })}
      </div>
    )
  }
}

Existe uma maneira de retornar essas várias linhas e colocá-las na mesma tabela sem agrupá-las em uma div e obter um erro? Sei que posso criar uma tabela separada para cada componente, mas isso diminui um pouco minha formatação.