Tengo un componente llamado OrderItem que toma un objeto con varios objetos (al menos dos) dentro de él y los representa como varias filas dentro de una tabla. Habrá múltiples componentes OrderItem, componentes dentro de la tabla. El problema es que en la función de representación del componente, no puedo devolver varias líneas. Solo puedo devolver un solo componente, y si los envuelvo en un div, dice "<tr> no puede aparecer como hijo de<div>"

El código se parece a esto (dejé algunas cosas para facilitar la lectura)

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>
    )
  }
}

¿Hay alguna manera de que pueda devolver esas filas múltiples y hacer que estén en la misma tabla sin envolverlas en un div y obtener un error? Me doy cuenta de que puedo hacer una tabla separada para cada componente, pero eso me quita un poco el formato.