Kizspy | Question: 37 (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((prevorders) => [...prevOrders, 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
<div><h1>Welcome to the Restaurant!</h1>
return (
<button onClick={handleOrder}>Place Order</button><Kitchen ref={kitchenRef} /></div>);
FUOVER
