Đoạn mã React sau đây sử dụng trạng thái để quản lý các đơn hàng: 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'); }; \nPhần cuối của đoạn mã và nội dung câu hỏi không hiển thị đầy đủ trong ảnh.