отчет

src/App.jsx

@@ -8,6 +8,8 @@ export default function App() {
   const [editing, setEditing] = useState(null);
   const [showForm, setShowForm] = useState(false);
 
+  const [sortOrder, setSortOrder] = useState('asc');
+
   const handleAdd = () => { setEditing(null); setShowForm(true); };
   const handleEdit = prod => { setEditing(prod); setShowForm(true); };
   const handleDelete = id => remove(id);
@@ -17,12 +19,21 @@ export default function App() {
   };
   const handleCancel = () => setShowForm(false);
 
+  const sortedProducts = [...products].sort((a, b) =>
+    sortOrder === 'asc'
+      ? a.price - b.price
+      : b.price - a.price
+  );
+
+  const toggleSortOrder = () => setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
+
   return (
     <div className="container my-4">
       {/* <h1 className="mb-4">Каталог товаров</h1> */}
       <button className="btn btn-success mb-3" onClick={handleAdd}>Добавить товар</button>
-      {showForm && <ProductForm initial={editing} onSave={handleSave} onCancel={handleCancel} />}
+      <button className="btn btn-outline-primary mb-3 ms-3" onClick={toggleSortOrder}> Сортировать по цене {sortOrder === 'asc' ? '▲' : '▼'}</button>
-      <ProductList products={products} onEdit={handleEdit} onDelete={handleDelete} />
+      {showForm && <ProductForm initial={editing} onSave={handleSave} onCancel={handleCancel} mode={editing ? 'edit' : 'add'} />}
+      <ProductList products={sortedProducts} onEdit={handleEdit} onDelete={handleDelete} />
     </div>
   );
 }

src/components/ProductForm.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-export default function ProductForm({ initial, onSave, onCancel }) {
+export default function ProductForm({ initial, onSave, onCancel, mode }) {
   const [form, setForm] = useState({ name: '', price: '' });
 
   useEffect(() => {
@@ -17,6 +17,9 @@ export default function ProductForm({ initial, onSave, onCancel }) {
 
   return (
     <form onSubmit={handleSubmit} className="card p-3 mb-4">
+      <h4 className="mb-3">
+        {mode === 'edit' ? 'Редактирование товара' : 'Добавление товара'}
+      </h4>
       <div className="mb-2">
         <label className="form-label">Название</label>
         <input name="name" value={form.name} onChange={handleChange} required className="form-control" />