I have make a slider using carousel at Trip.js and in Home.Js I have created a review section by my self using useEffect and Everytime the slide changes it return values of pros which I have send on Trip.js component from Home.js, How to render the props value for once only.
import React, { useRef, memo } from "react";
import Carousel from "react-elastic-carousel";
import Item from "./Item";
import { items } from "./data";
import "./css/home.css";
import { Link } from "react-router-dom";
const Trip = (check) => {
const breakPoints = check.c;
console.log(breakPoints);
const carouselRef = useRef(null);
const onNextStart = (currentItem, nextItem) => {
if (currentItem.index === nextItem.index) {
carouselRef.current.goTo(0);
}
};
const onPrevStart = (currentItem, nextItem) => {
if (currentItem.index === nextItem.index) {
carouselRef.current.goTo(items.length);
}
};
return (
<div className="container">
<Carousel
className="carousel-university"
breakPoints={breakPoints}
ref={carouselRef}
onPrevStart={onPrevStart}
onNextStart={onNextStart}
disableArrowsOnEnd={false}
autoPlaySpeed={10000}
enableAutoPlay
pagination={false}
>
{items.map((item, index) => (
<Link to={`/trip/${item.title}`}>
<div key={item.id}>
<Item>
<img src={item.image} className="trip-img" alt={item.title} />
</Item>
<div className="trip-items-col">
<h3 className="trip-title">{item.title}</h3>
<p className="trip-date">{item.starton}</p>
</div>
</div>
</Link>
))}
</Carousel>
</div>
);
};
export default memo(Trip);
