How to add two separate filters on two .map methods in react?

Question

I can't seem to filter two separate things in react.js

I am able to filter by 'hotel ratings using state' but when I tried to add another, it wouldn't work. In the console it says should have a unique key prop.

How can I filter both data sets? currently im filtering one data set with .filter((h) => filter.ratings.includes(h.hotel.starRating))

when I tried creating something similar like this

(filter((room) => extra.occupancy.includes(room.occupancy.maxAdults)) 

it breaks the code, why is that ?

This is my code:

export default function App() {
  const [hotelRooms, setHotelRooms] = useState([]);
  const [filter, setFilter] = useState({ ratings: ["1", "2", "3", "4", "5"] });
const [extra, setExtra] = useState ({occupancy: ["1", "2", "3", "4", "5"] });
  
const fetchHotels = async () => {
    const res = await fetch(
      "https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG"
    );
    const hotels = await res.json();

    const hotelRooms = [];

    for (const hotel of hotels) {
      const res = await fetch(
        `https://obmng.dbm.guestline.net/api/roomRates/OBMNG/${hotel.id}`
      );
      const info = await res.json();
      hotelRooms.push({ hotel, rooms: info.rooms });
    }

    setHotelRooms(hotelRooms);
  };

  useEffect(() => {
    fetchHotels();
  }, []);

  const handleRatingFilter = (e) => {
    if (e.target.checked) {
      // adding value
      const temp = [...filter.ratings];
      temp.push(e.target.value);
      setFilter({ ...filter, ratings: temp });
    } else {
      // removing value
      setFilter({
        ...filter,
        ratings: [...filter.ratings.filter((v) => v !== e.target.value)]
      });
    }
  };

  const handleOccupancyExtra = (e) => {
    if (e.target.checked) {
      const perm = [...extra.occupancy];
      perm.push(e.target.value);
      setExtra({...extra, occupancy: perm});
    } else {
      setExtra ({
        ...extra,
        occupancy: [...extra.occupancy.filter((d) => d !== e.target.value)]
      });
    }
  };

  return (
    <div className="App">
      <div>
        {["1", "2", "3", "4", "5"].map((star) => (
          <div key={"input-" + star}>
            <input
              id={"rated" + star}
              value={star}
              name="ratings"
              type="checkbox"
              checked={filter.ratings.includes(star)}
              onChange={handleRatingFilter}
            />
            <label htmlFor={"rated" + star}>Rated {star} star</label>
          </div>
        ))}
      </div>
      <div>
        {["1", "2", "3", "4", "5"].map((adults) => (
          <div key={"adults" + adults}>
            <input
              id={"maximum" + adults}
              value={adults}
              name="extra"
              type="checkbox"
              checked={extra.occupancy.includes(adults)}
              onChange={handleOccupancyExtra}
            />
            <label htmlFor={"maximum" + adults}>adults {adults}</label>
          </div>
        ))}
      </div>

      
      {hotelRooms
        .filter((h) => filter.ratings.includes(h.hotel.starRating))
        
        
        .map((h) => (
          <div>
            <h2> Name: {h.hotel.name}</h2>
            <p> Description: {h.hotel.description}</p>
            <p> Rating: {h.hotel.starRating}</p>
            <p> Postcode: {h.hotel.postcode}</p>
            <p> City: {h.hotel.town}</p>
            

            <p style={{ fontWeight: "bold" }}>Rooms:</p>
            
             
            {h.rooms.map((room) => (
              
              <div>
                <h5>Occupancy</h5>

                <div> adults: {room.occupancy.maxAdults}</div>
                <div> Children: {room.occupancy.maxChildren}</div>
                <div> Maximum guests: {room.occupancy.maxOverall}</div>
                <div> Room type: {room.name}</div>
               
              </div>
            ))}
          </div>
        ))}
    </div>
  );
}

Answer 1

Change const {extra, setExtra} to const [extra, setExtra]