Search⌘ K
AI Features
Home
Courses
Rails for Front-end Development: Essential Tools

Using Props With Context

Explore how to use props alongside React context to manage global state efficiently. This lesson teaches you to simplify components by delegating state management to context and dispatch actions with reducers, improving application interactivity and maintainability.

We'll cover the following...

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

TypeScript 3.3.4
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

...