Highlight booking row when clicked

Instructions:

Within the <SearchResults /> component or its child components, add an onClick handler to each row in the table (hint: on the <tr> element). When clicked, the row is “selected” and highlighted with a different colour. When clicked again, the row is unselected and the coloured highlighting is removed.

Hint: Use a new state variable for each row to record if the row is selected or not, and use this value to set a class to the className prop of the row.

Test:

• Verify that each row of your table can be highlighted (on and off) independently when being clicked.

Instructions:

In the <Bookings /> component, declare a new state bookings with the corresponding setter function setBookings to hold the FakeBookings data. Instead of passing FakeBookings directly to the <SearchResults /> component, pass the new bookings state variable.

Hint: The new bookings state should be initialised with the FakeBookings variable.

Test:

• The bookings are still rendered correctly in the page.

Instructions:

Pass a new prop named orderType to the <Order /> component with the value “Pizzas”. Then render the orderType prop instead of “Pizzas” in the <Order /> component. Make sure that “Pizzas” is still displayed on the screen. In the <ul> list of the <Restaurant /> component, render 2 others <Order /> components but this time pass different values for the orderType prop: “Salads” and “Chocolate cake”.

Depends on #12

Test:

• For each order, the number of items can be incremented independently.
• Explain what is happening in your test description

Instructions:

Extract the <li> containing “Pizzas” from the <Restaurant /> component to a new component named Order. Also, move the declaration of the orders state and the orderOne function from the <Restaurant /> component to the new <Order /> component. Use the <Order /> component in the <ul> list of the <Restaurant /> component.

Dependent on #11

Test:

• The pizza order is still rendered on the page
• Clicking on the “Add” button still increments the number of orders.

Dependent ticket: complete and merge #9 before starting this ticket

Instructions:

In the <Restaurant /> component, create a new function named orderOne. The orderOne function doesn’t take any parameters and should use the setOrders function to increment the orders state variable by 1. Then, add a onClick handler to the Add <button> that calls the orderOne function when it’s being clicked.

Test:

When the Add button is clicked, the number of pizzas increases by 1

Instructions:

Working in Restaurant component

At the moment, the number of pizzas a guest can order is static and set to 0, even if they click on the ‘Add’ button. We will change that in the following to let a guest add more pizzas to their order. First, declare a new state variable orders along with the function to set the orders state setOrders. The initial value of the orders state should be 0. Use the new orders variable instead of the pizzas variable (that you can now delete).

Hint: You need to use the React function useState to create a state variable. Remember to import the function at the top with import React, {useState} from "react";.

Test:

• The number of ordered pizzas is still 0 on the screen.

Instructions:

Within the src/App.js file, render the <Restaurant /> component (that is provided for you in src/Restaurant.js) underneath the <Bookings /> component.

Test:

• The restaurant orders should render on the page.