Search⌘ K
AI Features
Home
Courses
Modern Front-end Development for Rails

Using Props With Context

Explore how to effectively use props in combination with React context and reducers to manage component state. Understand separating local and global state concerns, handling actions, and improving state clarity while preparing for asynchronous server communication.

We'll cover the following...

Row component

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 "./app"
interface RowProps {
  rowNumber: number
}
const Row = ({ rowNumber }: RowProps) => {
  const context = React.useContext<IsVenueContext>(VenueContext)
  const seatItems = Array.from(Array(context.state.seatsInRow).keys()).map(
    seatNumber => {
      return (
        <Seat
          key={seatNumber + 1}
          seatNumber={seatNumber + 1}
          rowNumber={rowNumber + 1}
        />
      )
    }
  )
  return <tr>{seatItems}</tr>
}
export default Row

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

Seat component

The Seat component takes on all the application logic for seat status, and so it ...