Rails for Front-end Development: Essential Tools/

...

/

Connecting to the Page

Connecting to the Page

Learn about writing the venue component in this lesson!

We'll cover the following...

The Venue component

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

Press + to interact
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>
  )
}
export default Venue

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

We cheat herein that the list of row numbers is hard-coded. This is because we haven’t looked at ways to get the information about how many rows are in a venue from Rails to React. We’ll talk more about that in ...