Rails for Front-end Development: Essential Tools/

...

/

Using Props With Context

Using Props With Context

In this lesson, we'll learn how to use contexts in React code.

We'll cover the following...

The Row component is no longer tracking the state of its seats, so it can be much simpler:

Press + to interact
import * as React from "react"
import Seat from "components/seat"
import { IsVenueContext, VenueContext } from "components/app"
interface RowProps {
  rowNumber: number
}
const Row = ({ rowNumber }: RowProps): React.ReactElement => {
  const context = React.useContext<IsVenueContext>(VenueContext)
  const seatItems = Array.from(Array(context.state.seatsPerRow).keys()).map(
    (seatNumber) => {
      return (
        <Seat
          key={seatNumber + 1}
          seatNumber={seatNumber + 1}
          rowNumber={rowNumber}
        />
      )
    }
  )
  return <tr className="h-20">{seatItems}</tr>
}
export default Row

Note that we haven’t abandoned the use of props. The row number of each row isn’t a part of the global state, so we pass it to that row as a prop. Similarly, each Seat component will receive its row and seat number as props.

Seat component

...