У меня есть компонент с именем OrderItem, который принимает объект с несколькими объектами (по крайней мере, двумя) внутри него и отображает их как несколько строк внутри таблицы. Внутри таблицы будет несколько элементов OrderItem com, ponents. Проблема в том, что в функции рендеринга компонента я не могу вернуть несколько строк. Я могу вернуть только один компонент, и если я заверну их в div, он говорит:<tr> не может появиться как ребенок<div>"

Код выглядит примерно так (я упустил некоторые вещи для удобства чтения)

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

Есть ли способ, которым я могу вернуть эти несколько строк, и чтобы они были в одной таблице, не заключая их в div и не получая ошибку? Я понимаю, что могу создать отдельную таблицу для каждого компонента, но это немного отбрасывает мое форматирование.