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

Passing Data through our React Code

Explore how to pass data through React components while managing client-side seat status and server communication in a Rails app. Understand useEffect hooks, fetch POST requests, and Rails endpoints to synchronize ticket data and user interactions.

We'll cover the following...

Following our change through, the VenueBody component doesn’t change much, it just takes in the extra values and passes them along, giving each row its corresponding RowData:

TypeScript 3.3.4
import * as React from "react"
import Row from "./row"
import { VenueData } from "./venue"
interface VenueBodyProps {
  concertId: number
  rows: number
  seatsInRow: number
  ticketsToBuy: number
  venueData: VenueData
}
const rowItems = (props: VenueBodyProps) => {
  const rowNumbers = Array.from(Array(props.rows).keys())
  return rowNumbers.map(rowNumber => (
    <Row
      key={rowNumber}
      rowNumber={rowNumber}
      seatsInRow={props.seatsInRow}
      ticketsToBuy={props.ticketsToBuy}
      concertId={props.concertId}
      rowData={props.venueData[rowNumber]}
    />
  ))
}
export const VenueBody = (props: VenueBodyProps) => {
  return (
    <table className="table">
      <tbody>{rowItems(props)}</tbody>
    </table>
  )
}
export default VenueBody

The Row component carries a lot of load here. It maintains a ...