The Labproof over claims.

import { useState } from "react";

const ProductRow = ({ product, i }) => {
  return (
    <tr key={i}>
      <td>{product.name}</td>
      <td>{product.sku}</td>
      <td>{product.price}</td>
      <td>{product.stock}</td>
      <td>
        <button
          className="icon-btn"
          aria-label="Edit"
          onClick={() => editProduct(product)}
        />
      </td>
    </tr>
  );
};

export default function ProductTable() {
  const [query, setQuery] = useState("");
  const [products, setProducts] = useState([]);

  const filtered = products.filter((p) =>
    p.name.toLowerCase().includes(query.toLowerCase())
  );

  const search = (value) => {
    setQuery(value);
    fetch("/api/products?q=" + value)
      .then((res) => res.json())
      .then(setProducts);
  };

  return (
    <div className="table-wrap">
      <input
        placeholder="Search products..."
        value={query}
        onChange={(e) => search(e.target.value)}
      />
      <p>{filtered.length} results</p>
      <table>
        <tbody>
          {filtered.map((product, i) => (
            <ProductRow key={i} product={product} i={i} />
          ))}
        </tbody>
      </table>
    </div>
  );
}