App.tsx 753 B

1234567891011121314151617181920212223242526
  1. import React, { useState } from 'react';
  2. import ProductList from './components/ProductList';
  3. import AddProductForm from './components/AddProductForm';
  4. import { Product } from './types';
  5. const App: React.FC = () => {
  6. const [products, setProducts] = useState<Product[]>([]);
  7. const addProduct = (product: Product) => {
  8. setProducts([...products, { ...product, id: Date.now() }]);
  9. };
  10. const deleteProduct = (id: number) => {
  11. setProducts(products.filter(product => product.id !== id));
  12. };
  13. return (
  14. <div className="container">
  15. <h1>Product Management System</h1>
  16. <AddProductForm onAddProduct={addProduct} />
  17. <ProductList products={products} onDeleteProduct={deleteProduct} />
  18. </div>
  19. );
  20. };
  21. export default App;