Answer (Choose 1 answer)
import React, {useState} from 'react':
function Dish({name}) {
return <li>{name}</li>:
}
function Kitchen() {
const [orders, setOrders] = useState([]):
// Triggering a render (delivering the guest's order to the kitchen)
const addOrder = (order) => {
setOrders((prev Orders) => [...prev Orders, order]):
}
// Rendering the component (preparing the order in the kitchen)
const renderOrders = () => {
return orders.map((order, index) => <Dish key={index} name={order} />):
};
// Committing to the DOM (placing the order on the table)return (
<div>
<h2>Orders:</h2>
<ul>{renderOrders()}</ul></div>
):
}
function Waiter() { const
handleOrder = () => {
// Triggering a render (delivering the guest's order to the kitchen)
kitchenRef.current.addOrder('Pizza'):
}:
// A reference to the Kitchen component
const kitchenRef = React.createRef():
// Rendering the Waiter component
return (
<div>
<h1>Welcome to the Restaurant!</h1>
<button onClick={handleOrder}>Place Order</button>
<Kitchen ref={kitchenRef} /></div>
):
Exit 26
