Helleo,
i Need to get a data ({item.type}
) from a child component when i click and send it to the parent.
Am passing a props in the click event like this: onClick={clickActionTransfer}
i should get the type
at this moment and send it to the parent so i can make some operations in handleSlideClick
function
my handleSlideClick
function here, do some other things nothing to do with this
Child <VerticalCarousel>
:
const VerticalCarousel = ({ data, clickActionTransfer }) => {
<div className="carousel-inner">
{data.map((item, i) => (
<button
type="button"
onClick={clickActionTransfer}
})}
key={i}>
<span className="span-theme"></span>
{item.type}
</button>
))}
</div>
..
...
..
}
Parent <Slider>
:
const Slider = ({ getData, clickAction, children }) => {
const [dataSlider, setDataSlider] = useState([]);
const [idLoader, setIdLoader] = useState(clickAction);
return (
<div className="slider__container">
{dataSlider.map((i) => {
return (
idLoader === i.id &&
i.id <= dataSlider.length && (
<div key={i.id}>
<div
style={{
transform: `translateX(-${currentIndex * 100}%)`,
display: "flex",
position: "fixed",
transition: "all .5s 1s linear",
}}
>
{" "}
{children}{" "}
</div>
<div
className={
displayTitleState && i.theme === "dark" ? "dark-theme" : ""
}>
{dataSlider.map((i, index) => {
return <h1 key={index}> {i.title}</h1>;
})}
</div>
<div className="slider__content">
<div
className={`slider__right ${
displayCarouselState ? "showCarousel" : "hideCarousel"
} ${i.theme === "dark" ? "dark-theme" : ""}`}
>
<VerticalCarousel
data={i.slider}
clickActionTransfer={handleSlideClick}
/>
</div>
</div>
</div>
)
);
})}
</div>
);
..
...
.
}
>Solution :
onClick={()=>{clickActionTransfer(item.type)}}