I'm still pretty new to coding and tried to find all over the internet a way to display and make use of my filter api.
I have created these filters:
export const filterDataBuy = [
{
items: [
{ name: '150,000', value: '150000' },
{ name: '200,000', value: '200000' },
{ name: '250,000', value: '250000' },
{ name: '300,000', value: '300000' },
{ name: '350,000', value: '350000' },
{ name: '400,000', value: '400000' },
{ name: '450,000', value: '450000' },
{ name: '500,000', value: '500000'},
],
placeholder: 'Min Price(USD)',
queryName: 'minPrice',
},
{
items: [
{ name: '500,000', value: '500000' },
{ name: '550,000', value: '550000' },
{ name: '600,000', value: '600000' },
{ name: '650,000', value: '650000' },
{ name: '700,000', value: '700000' },
{ name: '750,000', value: '750000' },
{ name: '800,000', value: '800000' },
{ name: '900,000', value: '900000' },
{ name: '950,000', value: '950000' },
{ name: '1,000,000', value: '1000000' },
{ name: '1,500,000', value: '1500000' },
{ name: '1,600,000', value: '1600000' },
{ name: '1,700,000', value: '1700000' },
{ name: '1,800,000', value: '1800000' },
{ name: '1,900,000', value: '1900000' },
{ name: '2,000,000', value: '2000000' },
],
placeholder: 'Max Price(USD)',
queryName: 'maxPrice',
},
{
items: [
{ name: 'Lowest Price', value: 'price-asc' },
{ name: 'Highest Price', value: 'price-des' },
{ name: 'Newest', value: 'date-asc' },
{ name: 'Oldest', value: 'date-desc' },
],
placeholder: 'Sort',
queryName: 'sort',
},
{
items: [
{ name: '1', value: '1' },
{ name: '2', value: '2' },
{ name: '3', value: '3' },
{ name: '4', value: '4' },
{ name: '5', value: '5' },
{ name: '6', value: '6' },
{ name: '7', value: '7' },
{ name: '8', value: '8' },
{ name: '9', value: '9' },
{ name: '10', value: '10' },
],
placeholder: 'Rooms',
queryName: 'roomsMin',
},
{
items: [
{ name: '1', value: '1' },
{ name: '2', value: '2' },
{ name: '3', value: '3' },
{ name: '4', value: '4' },
{ name: '5', value: '5' },
{ name: '6', value: '6' },
{ name: '7', value: '7' },
{ name: '8', value: '8' },
{ name: '9', value: '9' },
{ name: '10', value: '10' },
],
placeholder: 'Baths',
queryName: 'bathsMin'
},
];
export const getFilterValues = (filterValues) => {
const {
minPrice,
maxPrice,
sort,
roomsMin,
bathsMin,
} = filterValues;
const values = [
{
name: 'minPrice',
value: minPrice,
},
{
name: 'maxPrice',
value: maxPrice,
},
{
name: 'sort',
value: sort,
},
{
name: 'roomsMin',
value: roomsMin,
},
{
name: 'bathsMin',
value: bathsMin,
},
];
return values;
}
And now I am not sure how I #1 can display them and #2 how to put them in effect, so that when for example min price is chosen that all properties from that price and up are shown.
I do understand that I have to call on the values, but just not sure how to put them in display and how to put them in effect.
This is sample data that I want to be filterd:
import PropertyPic from "../assets/images/propertyImage.jpeg";
import BedroomImage from "../assets/icons/icons8-sleeping-in-bed-100.png";
import BathroomImage from "../assets/icons/icons8-shower-80.png";
import SqftImage from "../assets/icons/sqft-img.png";
const PropertyData = [
{
id:"1",
listingType:"Buy",
type:"Villa",
image:PropertyPic,
heading:"Comfortable Apartment in Sint Maarten",
description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.',
price:" $1.000.000",
address:"Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin",
location:"Sint Maarten",
surfaceImage:SqftImage,
surface:"1200 Sqft",
bedrooms:"3 Beds",
bedImage:BedroomImage,
bath:"2 Bathroom",
bathImage:BathroomImage
},
{
id:"2",
type:"Appartment",
listingType:"Buy",
image:PropertyPic,
heading:"Comfortable Apartment in Sint Maarten",
description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.',
price:" $200.000",
address:"Lot 644 Rue Dufy Terres Basses Saint Martin, 97150",
Location:"Sint Maarten",
surfaceImage:SqftImage,
surface:"1200 Sqft",
bedrooms:"3 Beds",
bedImage:BedroomImage,
bath:"2 Bathroom",
bathImage:BathroomImage
},
{
id:"3",
type:"Villa",
listingType:"Rent",
image:PropertyPic,
heading:"Comfortable Apartment in Sint Maarten",
description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.',
price:" $10.000",
address:"Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin",
Location:"Sint Maarten",
surfaceImage:SqftImage,
surface:"1200 Sqft",
bedrooms:"3 Beds",
bedImage:BedroomImage,
bath:"2 Bathroom",
bathImage:BathroomImage
},
{
id:"4",
type:"Villa",
listingType:"Buy",
image:PropertyPic,
heading:"Comfortable Villa in Sint Maarten",
description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.',
price:" $450.000",
address:"Simpson Bay Yacht Club 12-3, 97150, Saint-Martin",
Location:"Sint Maarten",
surfaceImage:SqftImage,
surface:"1200 Sqft",
bedrooms:"3 Beds",
bedImage:BedroomImage,
bath:"2 Bathroom",
bathImage:BathroomImage
},
{
id:"5",
type:"House",
listingType:"Rent",
image:PropertyPic,
heading:"Comfortable Apartment in Sint Maarten",
description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.',
price:" $1.000.000",
address:"Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin",
surfaceImage:SqftImage,
surface:"1200 Sqft",
bedrooms:"3 Beds",
bedImage:BedroomImage,
bath:"2 Bathroom",
bathImage:BathroomImage
},
{
id:"6",
type:"Appartment",
listingType:"Rent",
image:PropertyPic,
heading:"Comfortable Apartment in Sint Maarten",
description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.',
price:" $2000",
address:"Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin",
surfaceImage:SqftImage,
surface:"1200 Sqft",
bedrooms:"3 Beds",
bedImage:BedroomImage,
bath:"2 Bathroom",
bathImage:BathroomImage
},
{
id:"7",
type:"Villa",
listingType:"Buy",
image:PropertyPic,
heading:"Comfortable Apartment in Sint Maarten",
description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.',
price:" $1.000.000",
address:"Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin",
surfaceImage:SqftImage,
surface:"1200 Sqft",
bedrooms:"3 Beds",
bedImage:BedroomImage,
bath:"2 Bathroom",
bathImage:BathroomImage
},
{
id:"8",
type:"Villa",
listingType:"Buy",
image:PropertyPic,
heading:"Comfortable Apartment in Sint Maarten",
description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.',
price:" $1.000.000",
address:"Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin",
surfaceImage:SqftImage,
surface:"1200 Sqft",
bedrooms:"3 Beds",
bedImage:BedroomImage,
bath:"2 Bathroom",
bathImage:BathroomImage
}
]
export default PropertyData;
CodePudding user response：
You can create a FilterInput for all filter selections and keep a state for all filters and another renderFilteredData function to do the filtering.
You can start like this:
const filterDataBuy = [ { items: [ { name: "150,000", value: "150000" }, { name: "200,000", value: "200000" }, { name: "250,000", value: "250000" }, { name: "300,000", value: "300000" }, { name: "350,000", value: "350000" }, { name: "400,000", value: "400000" }, { name: "450,000", value: "450000" }, { name: "500,000", value: "500000" } ], placeholder: "Min Price(USD)", queryName: "minPrice" }, { items: [ { name: "500,000", value: "500000" }, { name: "550,000", value: "550000" }, { name: "600,000", value: "600000" }, { name: "650,000", value: "650000" }, { name: "700,000", value: "700000" }, { name: "750,000", value: "750000" }, { name: "800,000", value: "800000" }, { name: "900,000", value: "900000" }, { name: "950,000", value: "950000" }, { name: "1,000,000", value: "1000000" }, { name: "1,500,000", value: "1500000" }, { name: "1,600,000", value: "1600000" }, { name: "1,700,000", value: "1700000" }, { name: "1,800,000", value: "1800000" }, { name: "1,900,000", value: "1900000" }, { name: "2,000,000", value: "2000000" } ], placeholder: "Max Price(USD)", queryName: "maxPrice" }, { items: [ { name: "Lowest Price", value: "price-asc" }, { name: "Highest Price", value: "price-des" }, { name: "Newest", value: "date-asc" }, { name: "Oldest", value: "date-desc" } ], placeholder: "Sort", queryName: "sort" }, { items: [ { name: "1", value: "1" }, { name: "2", value: "2" }, { name: "3", value: "3" }, { name: "4", value: "4" }, { name: "5", value: "5" }, { name: "6", value: "6" }, { name: "7", value: "7" }, { name: "8", value: "8" }, { name: "9", value: "9" }, { name: "10", value: "10" } ], placeholder: "Rooms", queryName: "roomsMin" }, { items: [ { name: "1", value: "1" }, { name: "2", value: "2" }, { name: "3", value: "3" }, { name: "4", value: "4" }, { name: "5", value: "5" }, { name: "6", value: "6" }, { name: "7", value: "7" }, { name: "8", value: "8" }, { name: "9", value: "9" }, { name: "10", value: "10" } ], placeholder: "Baths", queryName: "bathsMin" } ]; const PropertyData = [ { id: "1", listingType: "Buy", type: "Villa", heading: "Comfortable Apartment in Sint Maarten", description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.", price: " $1.000.000", address: "Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin", location: "Sint Maarten", surface: "1200 Sqft", bedrooms: "3 Beds", bath: "2 Bathroom" }, { id: "2", type: "Appartment", listingType: "Buy", heading: "Comfortable Apartment in Sint Maarten", description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.", price: " $200.000", address: "Lot 644 Rue Dufy Terres Basses Saint Martin, 97150", Location: "Sint Maarten", surface: "1200 Sqft", bedrooms: "3 Beds", bath: "2 Bathroom" }, { id: "3", type: "Villa", listingType: "Rent", heading: "Comfortable Apartment in Sint Maarten", description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.", price: " $10.000", address: "Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin", Location: "Sint Maarten", surface: "1200 Sqft", bedrooms: "3 Beds", bath: "2 Bathroom" }, { id: "4", type: "Villa", listingType: "Buy", heading: "Comfortable Villa in Sint Maarten", description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.", price: " $450.000", address: "Simpson Bay Yacht Club 12-3, 97150, Saint-Martin", Location: "Sint Maarten", surface: "1200 Sqft", bedrooms: "3 Beds", bath: "2 Bathroom" }, { id: "5", type: "House", listingType: "Rent", heading: "Comfortable Apartment in Sint Maarten", description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.", price: " $1.000.000", address: "Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin", surface: "1200 Sqft", bedrooms: "3 Beds", bath: "2 Bathroom" }, { id: "6", type: "Appartment", listingType: "Rent", heading: "Comfortable Apartment in Sint Maarten", description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.", price: " $2000", address: "Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin", surface: "1200 Sqft", bedrooms: "3 Beds", bath: "2 Bathroom" }, { id: "7", type: "Villa", listingType: "Buy", heading: "Comfortable Apartment in Sint Maarten", description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.", price: " $1.000.000", address: "Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin", surface: "1200 Sqft", bedrooms: "3 Beds", bath: "2 Bathroom" }, { id: "8", type: "Villa", listingType: "Buy", heading: "Comfortable Apartment in Sint Maarten", description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, illoat. Repudiandae ratione impedit delectus consectetur. Aspernaturvero obcaecati placeat ab distinctio unde ipsam molestias atqueratione delectus blanditiis nemo eius dignissimos doloremque quaealiquid maiores id tempore consequatur, quod pariatur saepe.", price: " $1.000.000", address: "Lot 644 Rue Dufy Terres Basses Saint Martin, 97150, Saint-Martin", surface: "1200 Sqft", bedrooms: "3 Beds", bath: "2 Bathroom" } ];
const renderFilteredData = (propertyData, filterState) => {
const filtered = propertyData.filter(({ price, bath, bedrooms }) => {
let valid = true;
const minPriceNum = Number(filterState.minPrice);
const maxPriceNum = Number(filterState.maxPrice);
const priceNum = Number(price.replace(/[^\d] /g, ""));
// filter price
valid = valid && priceNum >= minPriceNum && priceNum <= maxPriceNum;
const bathsNum = Number(bath.replace(/[^\d] /g, ""));
const bedsNum = Number(bedrooms.replace(/[^\d] /g, ""));
const bathsMin = Number(filterState.bathsMin);
const roomsMin = Number(filterState.roomsMin);
// filter baths and beds
valid = valid && bathsNum >= bathsMin && bedsNum >= roomsMin;
return valid;
});
// do the sorting here, not realted to filtering
// it's about how to view the filtered data
return filtered.map(({ id, heading, price, bath, bedrooms }) => (
<div
style={{ border: "solid 1px", padding: "5px", margin: "5px" }}
key={id}
>
<h4>{heading}</h4>
<h5>{price}</h5>
<div>bath rooms: {bath}</div>
<div>bed rooms: {bedrooms}</div>
</div>
));
};
const FilterInput = ({
items,
placeholder,
queryName,
handleFilterChange,
value
}) => {
React.useEffect(() => {
handleFilterChange(queryName, items[0].value);
}, []);
return (
<div style={{ marginBottom: "15px" }}>
<label htmlFor={placeholder}>{placeholder}</label>
<br />
<select
id={placeholder}
value={value}
onChange={({ target: { value } }) => {
handleFilterChange(queryName, value);
}}
>
{items.map(({ name, value }) => (
<option value={value} key={name}>
{name}
</option>
))}
</select>
</div>
);
};
function App() {
const [filterState, setFilterState] = React.useState({});
const handleFilterChange = React.useCallback((queryName, value) => {
setFilterState((prevState) => ({
...prevState,
[queryName]: value
}));
}, []);
React.useEffect(() => {}, [filterState]);
return (
<div>
{filterDataBuy.map(({ items, placeholder, queryName }) => (
<FilterInput
key={queryName}
items={items}
placeholder={placeholder}
queryName={queryName}
handleFilterChange={handleFilterChange}
value={filterState[queryName]}
/>
))}
<div>{renderFilteredData(PropertyData, filterState)}</div>
</div>
);
}
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>NOTE: Ideally you should call a backend endpoint with the filter state to do the data filtering.