Applying multiple dynamic filters - reactjs

Question

After now two full days of trial and error and googling, I am starting to lose my mind and really could use some help. This is my second React hobby-project, so please bear with me if it contains any "no-go's".
Situation:
I call an API, store the data in state (hotel rooms), display all rooms at first. After applying a search, I want to narrow it down further - and that works (with hardcoded values for testing).
I take all available rooms, filter them, store them into another array and let that array then get displayed.
The Problem:
My search is not dynamic. I can narrow the results down, but I can't "bring them back up". For example: if a user wants the rooms narrowed down by price and by "pets allowed", it gets displayed. But if he decides that bringing his pet is not that important and unchecks the filter, the results stay the same as before.
The handleClicks and Buttons are just there to quickly test things, they're not how the end result will be. Also, I've left out the fetchRoomsData(), as it's not important here.
If anyone could help me out here, it would be highly appreciated!
Thanks in advance :)
import React, { Component } from "react";
import Roomcard from "./RoomCard.js";
export default class AllRooms extends Component {
constructor() {
super();
this.state = {
data: undefined,
fetched: false,
roomsToDisplay: [],
hasFilter: {
price: 300,
capacity: 3,
pets: true,
breakfast: false,
},
};
}
componentDidMount() {
this.fetchRoomsData();
}
handleClick1() {
this.filterByPrice();
}
handleClick2() {
this.filterByPets();
}
handleClick3() {
this.filterByCapacity();
}
handleClick4() {
this.filterByBreakfast();
}
handleClick5() {
this.generateAllRooms();
}
filterByPrice() {
let tempArr = [];
this.state.roomsToDisplay.map((room) =>
room.props.price < this.state.hasFilter.price ? tempArr.push(room) : null
);
if (tempArr.length > 0) {
this.setState({ roomsToDisplay: tempArr });
} else {
this.setState({
roomsToDisplay: <h1>There are no matching results.</h1>,
});
}
}
filterByPets() {
let tempArr = [];
this.state.roomsToDisplay.map((room) =>
room.props.pets ? tempArr.push(room) : null
);
if (tempArr.length > 0) {
this.setState({ roomsToDisplay: tempArr });
} else {
this.setState({
roomsToDisplay: <h1>There are no matching results.</h1>,
});
}
}
filterByBreakfast() {
let tempArr = [];
this.state.roomsToDisplay.map((room) =>
room.props.breakfast ? tempArr.push(room) : null
);
if (tempArr.length > 0) {
this.setState({ roomsToDisplay: tempArr });
} else {
this.setState({
roomsToDisplay: <h1>There are no matching results.</h1>,
});
}
}
filterByCapacity() {
let tempArr = [];
this.state.roomsToDisplay.map((room) =>
room.props.capacity > this.state.hasFilter.capacity
? tempArr.push(room)
: null
);
if (tempArr.length > 0) {
this.setState({ roomsToDisplay: tempArr });
} else {
this.setState({
roomsToDisplay: <h1>There are no matching results.</h1>,
});
}
}
generateAllRooms() {
let finalDiv = [];
this.state.data.items.map((room) =>
finalDiv.push(
<Roomcard
price={room.fields.price}
titleImage={`https:${room.fields.images[0].fields.file.url}`}
allImages={room.fields.images.map((image) => image.fields.file.url)}
name={room.fields.name.toUpperCase()}
slug={room.fields.slug}
capacity={room.fields.capacity}
type={room.fields.type}
size={room.fields.size}
pets={room.fields.pets}
breakfast={room.fields.breakfast}
featured={room.fields.featured}
description={room.fields.description}
extras={room.fields.extras}
key={Math.random() * 1000}
/>
)
);
this.setState({ roomsToDisplay: finalDiv });
}
render() {
return (
<>
<div className="search-field-outer-box">
<button onClick={() => this.handleClick1()}> Filter By Price </button>
<button onClick={() => this.handleClick2()}> Filter By Pets </button>
<button onClick={() => this.handleClick3()}> Filter By capacity </button>
<button onClick={() => this.handleClick4()}> Filter By breakfast </button>
<button onClick={() => this.handleClick5()}> Reset Filter </button>
</div>
{this.state.data ? (
<div className="room-card-container">{this.state.roomsToDisplay}</div>
) : undefined}
</>
);
}
}

Answer 1

👋 Welcome to SO
First of all, don't store jsx elements in the state, prefer to store only values and create the jsx at render time.
Now, what I would do is to have the whole dataset in a state variable (and never modify it) and another for the filtered data
this.state = {
data:[],
filteredData:[]
};
// Here at some point when retrieving the data,
// this.setState({data: fetchedData, filteredData: fetchedData});
filterByBreakfast() {
const dataFiltered = // your code to filter
this.setState({
filterdData: dataFiltered,
});
}
resetFilters() {
// Reset the Filtered Data
this.setState({
filterdData: this.state.data,
});
}
render() {
return {
<div>
<div>
<button onClick={this.filterByBreakfast}> Filter By breakfast </button>
<button onClick={this.resetFilters}> Reset Filter </button>
</div>
<div>
{filteredData.length > 0 ? filteredData.map(item => <div>{item}</div>) : <div>No results</div>}
</div>
</div>
}
}