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

Passing Data through our React Code

Explore how to manage client-side state in React components and pass data effectively. Understand the use of Rails endpoints with POST requests and CSRF tokens to sync seat selections and ticket statuses between client and server in a concert ticket app.

We'll cover the following...

The Row component

Following our change through, the VenueBody component doesn’t change much, it merely 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 "components/row"
import { VenueData } from "components/venue"
interface VenueBodyProps {
  concertId: number
  rowCount: number
  seatsPerRow: number
  ticketsToBuyCount: number
  venueData: VenueData
}
const rowItems = ({
  concertId,
  rowCount,
  seatsPerRow,
  ticketsToBuyCount,
  venueData,
}) => {
  const rowNumbers = Array.from(Array(rowCount).keys())
  return rowNumbers.map((rowNumber: number) => (
    <Row
      concertId={concertId}
      key={rowNumber}
      rowData={venueData[rowNumber]}
      rowNumber={rowNumber}
      seatsPerRow={seatsPerRow}
      ticketsToBuyCount={ticketsToBuyCount}
    />
  ))
}
export const VenueBody = (props: VenueBodyProps): React.ReactElement => {
  return (
    <table className="table">
      <tbody>{rowItems(props)}</tbody>
    </table>
  )
}
export default VenueBody

The Row component carries a lot of load here. It maintains a client-side status of each seat that is based on its ticket ...