Building chainable filter components in React? - arrays

Question

What's the most "React"y way to build reusable, chainable filter components?
Let's say I have an input array:
[
{name: 'Generic t-shirt', size: 'xxl', available: 35},
{name: 'Generic t-shirt', size: 'md', available: 2},
{name: 'Generic t-shirt', size: 'sm', available: 5},
{name: 'Really awesome shirt', size: 'md', available: 0}
]
And a keyword search for the name, a dropdown for size, and a "sold out" boolean checkbox for availability.
Right now, I have the filtering code inside the rendering loop:
const [productsFilteredByFullText, setProductsFilteredByFullText] = useState;
const [productsFilteredBySize, setProductsFilteredBySize] = useState;
const [productsFilteredByAvailability, setProductsFilteredByAvailability] = useState;
const searchResults = useMemo(() => {
let filteredProducts = eventsFromAPI; // array of products as input
filteredProducts = filteredEvents.filter(product => fullTextFilter(product));
filteredProducts = filteredEvents.filter(product => sizeFilter(product));
filteredProducts = filteredEvents.filter(product => availabilityFilter(product));
return filteredProducts;
}, [productsFilteredByFullText, productsFilteredBySize, productsFilteredByAvailability]);
And the UI inside JSX:
<div>
// Fulltext search
<input
type="text"
placeholder="Keyword search"
value={searchTerm}
onChange={fullTextHandler}
/>
// Size dropdown
<Dropdown
options={allAvailableSizes}
onChange={sizeHandler}
/>
// Sold out checkbox
<input
name="soldout"
type="checkbox"
checked={productsFilteredByAvailability}
onChange={availabilityHandler}
/>
<h1>Results</h1>
{filteredProducts.map(item => (
<Product item={item} />
))}
</div>
This works, but is not very reusable at all. Let's say I have another product category, scarves, that are all one size, but I still want to be able to re-use the filter component and logic for name and availability.
Is there a way to modularize/componentize BOTH the filter logic AND the presentation JSX into separate filter components, and be able to chain them together arbitrarily? Something like this pseuocode:
<TShirtList>
<NameFilter/>
<SizeFilter/>
<AvailabilityFilter/>
</TShirtList>
<ScarfList>
<NameFilter/>
<AvailabilityFilter/>
</ScarfList>
<ServicesList>
<NameFilter/>
</ServicesList>
So that each filter is its own component, able to be inserted into any array of products anywhere? Like how can a React component also provide its own logic/functions that other components can use (product array in, filtered product array + JSX UI out, but chainable).
Is that even the right way to think about this problem...? I'm confused about how to best build this architecturally.

Answer 1

Answer to this question
What's the most "React"y way to build reusable, chainable filter
components?
I suggest separate display & data logic by using hooks. Move all data related logic into a hook, and import that hook to a react component.
// useProducts.js
const useProducts = () => {
const [products, setProducts = useState([]);
const [filters, setFilters] = useState({}); // eg. filters = { size: 'large', availability: 'instock' }
// Get all products on initial load
useEffect(() => {
fetch(....).then(response => setProducts(response.data));
}, []);
// function to set filter.
const setFilter = (name, value) => {
setFilters({ ...filters, [name]: value });
}
// Loop filters and filter product
const filteredProducts = [...products];
for (const [key, value] of Object.entries(filters)) {
// Get list of products from somewhere.
filteredProducts = filterProducts.filter(p => p[key] === value);
}
return [filteredProducts, { setFilter }];
}
// Product List
import React from 'react';
import useProducts from './useProducts';
const ProductList = (props) => {
const [products, { setFilter }] = useProducts();
return (
<div>
<div className="toolbar">
<NameFilter onChange={value => setFilter('name', value)} />
<SizeFilter onChange={value => setFilter('size', value)} />
<AvailabilityFilter onChange={value => setFilter('availability', value)} />
</div>
<div>
{products.map(p => <ProductItem {...p} />}
</div>
</div>
);
}
Additionally, you can even modularize it more by import { setFilter } in the filter component itself. And you can remove the 'onChange' from the ProductList.
const NameFilter = () => {
const [, { setFilter }] = useProducts();
return (
<input
type="text"
onChange={e => setFilter('name', e.target.value)}
/>
);
}
// And now, we can remove onChange from each filter in Product List component
<div>
<div className="toolbar">
<NameFilter />
<SizeFilter />
<AvailabilityFilter />
</div>
<div>
{products.map(p => <ProductItem {...p} />}
</div>
</div>
*Note: Above code is just psuedo, it just shows the idea.

Answer 2

Any issues with conditionally filtering?
const searchResults =(text, size) => {
let filteredProducts = eventsFromAPI; // array of products as input
filteredProducts = text ? filteredEvents.filter(product => fullTextFilter(text)) : filteredProducts;
filteredProducts = size ? filteredEvents.filter(product => sizeFilter(product)) : filteredProducts
filteredProducts = filteredEvents.filter(product => availabilityFilter(product));
return filteredProducts;
};
size can be boolean.
can also be ... (psuedo code)
const Search =({filter = []}) => {
let filteredProducts = eventsFromAPI; // array of products as input
filteredProducts = filter.indexOf('something') > -1 ? filteredEvents.filter(product => fullTextFilter(text)) : filteredProducts;
filteredProducts = filter.indexOf('size') > -1 ? filteredEvents.filter(product => sizeFilter(product)) : filteredProducts
filteredProducts = filteredEvents.filter(product => availabilityFilter(product));
return filteredProducts;
};
then u can call search({ filter: ['size', 'availability']}) or if you made it in to an component then <Search filter={['size', 'availability']} products={products} />
or even
const Search = ({ size = null, text = '', availability = true}) => {
... conditionally filtering
return //whatever product u render
}