[Hello!][1]
I'm getting this TypeScript error { "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
Unsure where my interfaces need to be added or if req at all?
this is highlighted setCurrent(carouselData[event.target.getAttribute("data-Testimonials")])
what to change them to . I have no idea where I am going wrong, as I've only been coding for a month.
My Code for a 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
Why do you need a data-Testimonials attribute?
Just pass directly the index to handleSetClick:
const handleSetClick = (index: keyof typeof carouselData) => {
setCurrent(carouselData[index])
setActive(index)
};
return (
<Container>
<Img src={current.image} />
<Title>{current.title}</Title>
<Text>{current.text}</Text>
<div>
{Object.keys(carouselData).map(index => (
<Span
onClick={() => handleSetClick(index)}
key={index} />
))}
</div>
</Container>
)
The code
const carouselData = {
0: {
// ...
}
}
defines carouselData data to use numerical indices, but you index it with event.target.getAttribute("data-Testimonials"), which implicitly has any type.
I would strongly type your event parameter, so event.target.getAttribute("data-Testimonials") has a string type. I would then redefine carouselData to use string indices like so:
const carouselData = {
'0': {
// ...
},
'1': {
// ...
}
}
It's generally best to avoid any type whenever possible to avoid these kinds of situations.