Kizspy | Question: 37
(Choose 1 answer)
FOGUER 4DW.LOV
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>
);
}
