Modern Front-end Development for Rails/

...

/

Tying Into the Page

Tying Into the Page

Learn about writing the venue component in this lesson!

We'll cover the following...

The Venue component

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

Press + to interact
import * as React from "react"
import Row from "./row"
interface VenueProps {
  rows: number
  seatsInRow: number
}
const Venue = (props: VenueProps) => {
  const rowNumbers = [1, 2, 3, 4, 6, 7, 8, 9, 10]
  const rowItems = rowNumbers.map(rowNumber => {
    return (
      <Row
        key={rowNumber}
        rowNumber={rowNumber}
        seatsInRow={props.seatsInRow}
      />
    )
  })
  return (
    <table className="table">
      <tbody>{rowItems}</tbody>
    </table>
  )
}
export default Venue

There’s a minor difference. The Venue returns an HTML table, and the props type is a little different, but basically the structure is similar: we still use map to convert a list of row numbers to a list of row items.

We do cheat here a little bit in that the list of row numbers is hard-coded. This is because we ...