User-234441352 posted
Hi,
I am trying to use following sample ( taken from https://reactstrap.github.io/components/carousel/ ) and getting following errors:
Severity Code Description Project File Line Suppression State
Error TS2307 (TS) Cannot find module '../images/191d14327e6facffb4cefb2d8e7ff2ce.jpg'. WebApplication6, WebApplication6 JavaScript Content Files C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\Home.tsx 6 Active
Error TS2307 (TS) Cannot find module '../images/sliders/001_2019_24_haus_klimapraemie_sst1_31393.jpg'. WebApplication6, WebApplication6 JavaScript Content Files C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\Home.tsx 7 Active
Error TS2307 (TS) Cannot find module '../images/sliders/001_2019_26_waes_top20_strandbekleidung_32337.jpg'. WebApplication6, WebApplication6 JavaScript Content Files C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\Home.tsx 9 Active
Error TS2307 (TS) Cannot find module '../images/sliders/001_2019_30_sais_oktoberfest_flexpage_34377.jpg'. WebApplication6, WebApplication6 JavaScript Content Files C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\Home.tsx 8 Active
Error TS2304 (TS) Cannot find name 'Component'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 28 Active
Error TS7006 (TS) Parameter 'newIndex' implicitly has an 'any' type. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project) C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 59 Active
Error TS7006 (TS) Parameter 'props' implicitly has an 'any' type. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project) C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 29 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx
40 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx
44 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx
48 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx
54 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx
60 Active
Error TS2339 (TS) Property 'setState' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 50
Active
Error TS2339 (TS) Property 'setState' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 56
Active
Error TS2339 (TS) Property 'setState' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 61
Active
Error TS2339 (TS) Property 'state' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 31 Active
Error TS2339 (TS) Property 'state' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 49 Active
Error TS2339 (TS) Property 'state' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 49 Active
Error TS2339 (TS) Property 'state' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 55 Active
Error TS2339 (TS) Property 'state' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 55 Active
Error TS2339 (TS) Property 'state' does not exist on type 'Example'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 65 Active
import React, { Component } from 'react';
import {
Carousel,
CarouselItem,
CarouselControl,
CarouselIndicators,
CarouselCaption
} from 'reactstrap';
const items = [
{
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 1',
caption: 'Slide 1'
},
{
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 2',
caption: 'Slide 2'
},
{
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 3',
caption: 'Slide 3'
}
];
class Example extends Component {
constructor(props) {
super(props);
this.state = { activeIndex: 0 };
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
this.goToIndex = this.goToIndex.bind(this);
this.onExiting = this.onExiting.bind(this);
this.onExited = this.onExited.bind(this);
}
onExiting() {
this.animating = true;
}
onExited() {
this.animating = false;
}
next() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
this.setState({ activeIndex: nextIndex });
}
previous() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
this.setState({ activeIndex: nextIndex });
}
goToIndex(newIndex) {
if (this.animating) return;
this.setState({ activeIndex: newIndex });
}
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src}
>
<img src={item.src} alt={item.altText} />
<CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>
);
});
return (
<Carousel
activeIndex={activeIndex}
next={this.next}
previous={this.previous}
>
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{slides}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
);
}
}
export default Example;
