state-reducer-start.js

import React, { useState } from "react";

const ProductSearchFilter = ({
  products = [],
  colors = [],
  sizes = [],
  onSearch = () => {}
}) => {
  const [product, setProduct] = useState(null);
  const [selectedColors, setSelectedColors] = useState([]);

  return (
    <>
      <div>
        {products.map((product) => (
          <label for={product}>
            <input
              type="radio"
              name="product"
              value={product}
              onChange={(e) => e.target.checked && setProduct(product)}
            />
            {product}
          </label>
        ))}
      </div>

      <div>
        {colors.map((color) => (
          <label for={color}>
            <input
              type="checkbox"
              name="selectedcolors"
              value={color}
              onChange={(e) =>
                e.target.checked
                  ? setSelectedColors([color, ...selectedColors])
                  : setSelectedColors(selectedColors.filter((c) => c !== color))
              }
            />
            {color}
          </label>
        ))}
      </div>

      <button onClick={() => onSearch(product, selectedColors)}>Search</button>
    </>
  );
};

export default ProductSearchFilter;

/**
 * Usage:
  <ProductSearchFilter
    products={["t-shirt", "shorts", "jeans"]}
    colors={["red", "white", "black"]}
    onSearch={() => ...hit the api...}
  />
 */