Composing Components

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

Invoking the Seat component

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

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

The Row component

Here’s what the Row component looks like. Look at the code first, and then we’ll talk about what’s weird here: