[Hey there!][1]
Encountering this TypeScript error message: { "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ 0: { image: string; title: string; text: string; }; 1: { image: string; title: string; text: string; }; 2: { image: string; title: string; text: string; }; }'.",}. TS7053
Curious about where I should include my interfaces or maybe if they are needed at all?
this part is emphasized setCurrent(carouselData[event.target.getAttribute("data-Testimonials")])
trying to figure out how to update them. It's puzzling, considering I'm still new to coding with just a month of experience.
My Code for managing carousel::
interface CarouselCardProperties {
image: string;
title: string;
text: string;
}
export default function Testimonials() {
const carouselData = {
0: {
image: tobi,
title: "I no longer have to howl at the moon to call for my lady !!",
text: "Tobi ~ Vancouver, Canada",
},
1: {
image: girly,
title: "With Enrico going on dates, we have more time to ourselves!",
text: " Gina ~ Rome, Italy",
},
2: {
image: loveshades,
title: "I no longer have to worry about staying clean, I kitties licking me every night. I have Love Shades on.",
text: " Princess ~ Georgia, USA",
},
};
const [current, setCurrent] = useState(carouselData[0])
const [active, setActive] = useState(0)
const handleSetClick = (event:any) => {
setCurrent(carouselData[event.target.getAttribute("data-Testimonials")])
setActive(event.target.getAttribute("data-Testimonials"))
};
return (
<Container>
<Img src={current.image} />
<Title>{current.title}</Title>
<Text>{current.text}</Text>
<div>
{Object.keys(carouselData).map(index => (
<Span
onClick={(event:any) => handleSetClick(event)}
data-Testimonials={index}
key={index} />
))}
</div>
</Container>
)
}
[1]: https://i.stack.imgur.com/A9CwZ.png