Composing Components

Now that we have a component for each seat, we want to combine multiple seats into a row and multiple rows into a venue. Invoking a component from another component normally involves a JSX call. The call essentially looks like the component is an HTML tag with the name of the component first, the props then follow with the same syntax used to write HTML attributes.

Invoking the Seat Component

If we want to use our Seat component, we’d call it with syntax such as <Seat seatNumber={seatNumber} />. The first part of the tag is our component name and we then assign the prop as if it were an HTML attribute, using the curly bracket notation to send the value of the seat number. If the value being sent is a string, we can use a string literal rather than the brackets, such as in <Seat description="front row center" />.

We don’t want to add just one Seat, though. Rather, we want to add an entire row of them. For the moment, we can assume that the seat numbers are just incremental integers, but our Row component needs to create a Seat component corresponding to each seat number regardless.

The Row component

Here’s what the Row component looks like. A quick look reveals something strange here: