Modern Front-End Development for Rails

Connecting to the Page

As we combined Seat components into a Row, we also need to combine Row components into a Venue. Our Venue component is similar to Row:

chapter_04/02/app/packs/components/venue.tsx

import * as React from "react"
import Row from "components/row"

interface VenueProps {
  rows: number
  seatsPerRow: number
}

const Venue = (props: VenueProps): React.ReactElement => {
  const rowNumbers = Array.from(Array(props.seatsPerRow).keys())
  const rowItems = rowNumbers.map((rowNumber) => {
    return (
      <Row
        key={rowNumber}
        rowNumber={rowNumber}
        seatsPerRow={props.seatsPerRow}
      />
    )
  })
  return (
    <table className="table">
      <tbody>{rowItems}</tbody>
    </table>
  )