Антон Спирин

import React, { Fragment, useCallback, useState } from "react";
import ReactDOM from "react-dom";

const arrProd = [
  {
    price: "5.75",
    sold: "100"
  },
  {
    price: "2.36",
    sold: "15"
  },
  {
    price: "5.48",
    sold: "20"
  },
  {
    price: "4.49",
    sold: "200"
  },
  {
    price: "3.15",
    sold: "258"
  },
  {
    price: "9.99",
    sold: "479"
  },
  {
    price: "4.8",
    sold: "147"
  },
  {
    price: "8",
    sold: "951"
  },
  {
    price: "4.27",
    sold: "753"
  },
  {
    price: "2.46",
    sold: "852"
  },
  {
    price: "4.99",
    sold: "742"
  },
  {
    price: "3.49",
    sold: "10"
  },
  {
    price: "2",
    sold: "26"
  },
  {
    price: "3.83",
    sold: "39"
  },
  {
    price: "9.98",
    sold: "47"
  },
  {
    price: "6.77",
    sold: "96"
  }
];

function App() {
  const [form, setForm] = useState({
    minPrice: "",
    maxPrice: "",
    sold: ""
  });

  const { minPrice, maxPrice, sold } = form;

  const [products, setProducts] = useState(arrProd);

  const handleChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(f => ({ ...f, [name]: value }));
  }, []);

  const handleSubmit = useCallback(
    e => {
      e.preventDefault();

      const filteredProducts = arrProd.filter(
        product =>
          (!maxPrice || +maxPrice >= +product.price) &&
          (!minPrice || +minPrice <= +product.price) &&
          (!sold || +sold >= +product.sold)
      );

      setProducts(filteredProducts);
    },
    [minPrice, maxPrice, sold]
  );

  const isPriceRangeValid = !minPrice || !maxPrice || +minPrice <= +maxPrice;
  const isSoldValid = +sold >= 0;

  return (
    <Fragment>
      <form onSubmit={handleSubmit}>
        {!isPriceRangeValid && <div>"Please provide a valid price range"</div>}
        Min
        <input
          type="text"
          name="minPrice"
          size={6}
          maxLength={10}
          value={minPrice}
          onChange={handleChange}
        />
        Max
        <input
          type="text"
          name="maxPrice"
          size={6}
          maxLength={10}
          value={maxPrice}
          onChange={handleChange}
        />
        {!isSoldValid && <div>Please provide a valid sold value</div>}
        Sold
        <input
          type="text"
          name="sold"
          size={6}
          maxLength={10}
          value={sold}
          onChange={handleChange}
        />
        <input type="submit" title={"Submit price range"} value={"Go"} />
      </form>
      <ul>
        {products.map((product, i) => (
          <li key={product.sold + i}>
            {product.price} - {product.sold}
          </li>
        ))}
      </ul>
    </Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);