add pagination

src/components/CarsList/CarsList.jsx

@@ -2,18 +2,45 @@ import { useSelector } from "react-redux";
 import { selectFilteredCars } from "../../redux/cars/carsSelectors";
 import { Car } from "../Car/Car";
 import { CarList, ListContainer, LoadMore } from "./CarsList.styled";
+import { useState } from "react";
 
 export const CarsList = () => {
+ const [visibleCars, setVisibleCars] = useState(4); // Локальний стан для кількості відображених елементів
  const filteredCars = useSelector(selectFilteredCars);
 
+ const loadMore = () => {
+ setVisibleCars((prevVisibleCars) => prevVisibleCars + 4); // Збільшуємо кількість відображених елементів на 4
+ };
+
+ const allCarsDisplayed = visibleCars >= filteredCars.length; // Перевіряємо, чи всі елементи вже відображені
+
  return (
  <ListContainer>
  <CarList>
- {filteredCars.map((car) => {
- return <Car key={car.id} car={car.car} />;
- })}
+ {filteredCars.slice(0, visibleCars).map((car) => (
+ <Car key={car.id} car={car.car} />
+ ))}
  </CarList>
- <LoadMore>Load more</LoadMore>
+ {!allCarsDisplayed && (
+ <LoadMore onClick={loadMore} disabled={allCarsDisplayed}>
+ Load more
+ </LoadMore>
+ )}
  </ListContainer>
  );
 };
+
+// export const CarsList = () => {
+// const filteredCars = useSelector(selectFilteredCars);
+
+// return (
+// <ListContainer>
+// <CarList>
+// {filteredCars.map((car) => {
+// return <Car key={car.id} car={car.car} />;
+// })}
+// </CarList>
+// <LoadMore>Load more</LoadMore>
+// </ListContainer>
+// );
+// };